Связать select и radio
Всем, привет!
подскажите как я могу связать список <select class="spisok "> <option value="0" class="no_select">Выберите ваш район</option> <option value="1">Район1</option> <option value="2">Район2</option> </select> чтобы при выборе определенного "Района" выбирался определенный radio <input type="radio" name="delivery" value="1" class="delivery-item" id="del-type-1"> <input type="radio" name="delivery" value="2" class="delivery-item" id="del-type-2"> спасибо! |
<body>
<select class="spisok" onchange="selRadio(this.value)">
<option value="0" class="no_select">Выберите ваш район</option>
<option value="1">Район1</option>
<option value="2">Район2</option>
</select>
<input type="radio" name="delivery" value="1" class="delivery-item" id="del-type-1">
<input type="radio" name="delivery" value="2" class="delivery-item" id="del-type-2">
<script>
function selRadio(val) {
var rad = document.getElementsByName("delivery");
for (var i = 0; i < rad.length; i++) {
rad[i].checked = rad[i].id == "del-type-" + val;
}
}
</script>
</body>
можно так и еще есть куча вариантов |
Спасибо, только у меня не работает, почему то..
|
еще вариант. если не работfет смотри в консоли броузера ошибки
<body>
<select class="spisok" name="spisok">
<option value="0" class="no_select">Выберите ваш район</option>
<option value="1">Район1</option>
<option value="2">Район2</option>
</select>
<input type="radio" name="delivery" value="1" class="delivery-item" id="del-type-1">
<input type="radio" name="delivery" value="2" class="delivery-item" id="del-type-2">
</body>
<script>
function selRadio(val) {
var spisok = document.getElementsByName("spisok")[0];
var rad = document.getElementsByName("delivery");
spisok.onchange = function () {
for (var i = 0; i < rad.length; i++) {
rad[i].checked = rad[i].id == "del-type-" + this.value;
}
}
}
window.onload = selRadio;
</script>
|
спасибо, буду искать проблему.
|
еще вариант
<body>
<select class="spisok">
<option value="0" class="no_select" disabled selected>Выберите ваш район</option>
<option value="1">Район1</option>
<option value="2">Район2</option>
</select>
<input type="radio" name="delivery" value="1" class="delivery-item" id="del-type-1">
<input type="radio" name="delivery" value="2" class="delivery-item" id="del-type-2">
</body>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
(function ($) {
$(function () {
$('select.spisok').change(function () {
$('#del-type-' + this.value).prop('checked', true);
});
$('input[name="delivery"]').change(function () {
$('select.spisok').find('option[value="' + this.value + '"]').prop('selected', true);
});
});
}(jQuery));
</script>
|
Связанные списки + radio
Poznakomlus, спасибо нашел там ошибку. Теперь встал вопрос, а как сделать так, чтобы не просто выделялся radio, а еще и совершалось действие onclik
<input type="radio" name="delivery" value="1" class="delivery-item" id="del-type-1" onclick="shEvOrd('delivery',this,1)">
т.е. когда я сам кликаю на radio у меня срабатывает onclick="shEvOrd('delivery',this,1)". А когда выбираю значение из select, то нет. Пробовал так: (function ($) {
$(function onclick(shEvOrd) {
$('select.spisok').change(function () {
$('#del-type-' + this.value).prop('checked', true);
});
$('input[name="delivery"]').change(function () {
$('select.spisok').find('option[value="' + this.value + '"]').prop('selected', true);
});
});
}(jQuery));
но чего то не срабатывает :( |
| Часовой пояс GMT +3, время: 23:33. |