Реализовать выбор пунктов
Вложений: 1
Привет всем! ;)
Помогите пожалуйста с решением вопроса, не получается что-то... С помощью jquery реализовать выбор. Смысл в том чтоб при выборе значения <input type="radio"> выдавались соответствующие ему блоки <option> Вложение 2784 <div class="value_two"> <label class="radio1"> <input id="radio1" type="radio" name="two" checked="checked"> <span class="radio-text1"></span> </label> <label class="radio2"> <input id="radio2" type="radio" name="two"> <span class="radio-text2"></span> </label> <label class="radio3"> <input id="radio3" type="radio" name="two"> <span class="radio-text3"></span> </label> <label class="radio4"> <input id="radio4" type="radio" name="two"> <span class="radio-text4"></span> </label> </div> <select id="char_platform" class="option_menu_style"> <option class="car3_5" value="1">3.5t 32 kWh</option> <option class="car3_5" value="2">3.5t 42 kWh</option> <option class="car3_5" value="3">3.5t 52 kWh</option> /**/ <option class="car5_5" value="4">5.5t 32 kWh</option> <option class="car5_5" value="5">5.5t 42 kWh</option> <option class="car5_5" value="6">5.5t 52 kWh</option> /**/ <option class="car9_5" value="7">9.5t 52 kWh</option> <option class="car9_5" value="8">9.5t 62 kWh</option> /**/ <option class="car26" value="9">26t 60 kWh</option> <option class="car26" value="10">26t 62 kWh</option> </select> Буду благодарен за помощь!!! :thanks: |
nikto93i7, так?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="value_two">
<label class="radio1">
<input id="radio1" type="radio" name="two" checked="checked" />
<span class="radio-text1"></span>
</label>
<label class="radio2">
<input id="radio2" type="radio" name="two" />
<span class="radio-text2"></span>
</label>
<label class="radio3">
<input id="radio3" type="radio" name="two" />
<span class="radio-text3"></span>
</label>
<label class="radio4">
<input id="radio4" type="radio" name="two" />
<span class="radio-text4"></span>
</label>
<label class="radio5">
<input id="radio5" type="radio" name="two" />
<span class="radio-text1"></span>
</label>
<label class="radio6">
<input id="radio6" type="radio" name="two" />
<span class="radio-text2"></span>
</label>
<label class="radio7">
<input id="radio7" type="radio" name="two" />
<span class="radio-text3"></span>
</label>
<label class="radio8">
<input id="radio8" type="radio" name="two" />
<span class="radio-text4"></span>
</label>
<label class="radio9">
<input id="radio9" type="radio" name="two" />
<span class="radio-text3"></span>
</label>
<label class="radio10">
<input id="radio10" type="radio" name="two" />
<span class="radio-text4"></span>
</label>
</div>
<select id="char_platform" class="option_menu_style">
<option class="car3_5" value="1">3.5t 32 kWh</option>
<option class="car3_5" value="2">3.5t 42 kWh</option>
<option class="car3_5" value="3">3.5t 52 kWh</option>
<option class="car5_5" value="4">5.5t 32 kWh</option>
<option class="car5_5" value="5">5.5t 42 kWh</option>
<option class="car5_5" value="6">5.5t 52 kWh</option>
<option class="car9_5" value="7">9.5t 52 kWh</option>
<option class="car9_5" value="8">9.5t 62 kWh</option>
<option class="car26" value="9">26t 60 kWh</option>
<option class="car26" value="10">26t 62 kWh</option>
</select>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$('input[type="radio"]').change(function( event ) {
var inpValue = event.target.id.match(/\d+/);
$("#char_platform option[value="+ inpValue + "]").attr("selected", "selected");
});
</script>
</body>
</html>
|
Спасибо за ответ, но немного не то...
Всего должно быть 4-е "radio" и при нажатии на один, в <select> будет оставаться только те <option> которые принадлежать данному "radio" т.е. кода выбран <label class="radio1"> <input id="radio1" type="radio" name="two" checked="checked"> <span class="radio-text1"></span> </label> показываются только <option class="car3_5" value="1">3.5t 32 kWh</option> <option class="car3_5" value="2">3.5t 42 kWh</option> <option class="car3_5" value="3">3.5t 52 kWh</option> |
input radio + ограничение select
nikto93i7,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="value_two">
<label class="radio1"> <input id="radio1" type="radio" name="two" checked="checked">
<span class="radio-text1"></span>
</label>
<label class="radio2"> <input id="radio2" type="radio" name="two">
<span class="radio-text2"></span>
</label>
<label class="radio3"> <input id="radio3" type="radio" name="two">
<span class="radio-text3"></span>
</label>
<label class="radio4"> <input id="radio4" type="radio" name="two">
<span class="radio-text4"></span>
</label>
</div>
<select id="char_platform" class="option_menu_style" size="8">
<option class="car3_5" value="1">3.5t 32 kWh</option>
<option class="car3_5" value="2">3.5t 42 kWh</option>
<option class="car3_5" value="3">3.5t 52 kWh</option>
/**/
<option class="car5_5" value="4">5.5t 32 kWh</option>
<option class="car5_5" value="5">5.5t 42 kWh</option>
<option class="car5_5" value="6">5.5t 52 kWh</option>
/**/
<option class="car9_5" value="7">9.5t 52 kWh</option>
<option class="car9_5" value="8">9.5t 62 kWh</option>
/**/
<option class="car26" value="9">26t 60 kWh</option>
<option class="car26" value="10">26t 62 kWh</option>
</select>
<script>
var sel = document.querySelector(".option_menu_style");
o = sel.querySelectorAll("option");
inp = document.querySelectorAll(".value_two [name='two']");
cls = ["car3_5", "car5_5", "car9_5", "car26"];
Array.prototype.forEach.call(inp, function(a, c) {
a.onclick = function() {
for (var a = cls[c], b = sel.options.length = 0; b < o.length; b++) o[b].classList.contains(a) && sel.options.add(o[b]);
sel.options[0].selected = !0
};
a.checked && a.onclick()
});
</script>
</body>
</html>
|
nikto93i7, как-то так...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
optgroup {
display: none;
}
</style>
</head>
<body>
<div class="value_two">
<label class="radio1">
<input id="radio1" type="radio" name="two" checked="checked" />
<span class="radio-text1"></span>
</label>
<label class="radio2">
<input id="radio2" type="radio" name="two" />
<span class="radio-text2"></span>
</label>
<label class="radio3">
<input id="radio3" type="radio" name="two" />
<span class="radio-text3"></span>
</label>
<label class="radio4">
<input id="radio4" type="radio" name="two" />
<span class="radio-text4"></span>
</label>
</div>
<select id="char_platform" class="option_menu_style">
<optgroup data-id="1">
<option class="car3_5" value="1">3.5t 32 kWh</option>
<option class="car3_5" value="2">3.5t 42 kWh</option>
<option class="car3_5" value="3">3.5t 52 kWh</option>
</optgroup>
<optgroup data-id="2">
<option class="car5_5" value="4">5.5t 32 kWh</option>
<option class="car5_5" value="5">5.5t 42 kWh</option>
<option class="car5_5" value="6">5.5t 52 kWh</option>
</optgroup>
<optgroup data-id="3">
<option class="car9_5" value="7">9.5t 52 kWh</option>
<option class="car9_5" value="8">9.5t 62 kWh</option>
</optgroup>
<optgroup data-id="4">
<option class="car26" value="9">26t 60 kWh</option>
<option class="car26" value="10">26t 62 kWh</option>
</optgroup>
</select>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$('#char_platform option:selected').parent().css('display', 'block');
$('input[type="radio"]').change(function( event ) {
var inpValue = event.target.id.match(/\d+/);
$('optgroup').each(function() {
$(this).css('display', 'none');
$(this).attr('data-id') == inpValue && $(this).css('display', 'block');
});
});
</script>
</body>
</html>
|
Даже два отличных ответа!!!))) Большое спасибо!)
|
| Часовой пояс GMT +3, время: 03:35. |