[英]Select radio button on change select list and vice versa using jQuery
單選按鈕和選擇列表包含相同的值。 如果選擇列表發生變化,我需要選擇相應的單選按鈕,反之亦然。
我到目前為止,但我很難將這些功能結合起來......任何幫助都非常感激。
$('.select-color').change(updateRadio); function updateRadio() { var sval = $(this).val(); $('input[name="color"][value="' + sval + '"]').prop('checked', true); }; $('input[name="color"]').change(updateSelect); function updateSelect() { var rval = $('input[name="color"]:checked').val(); $('.select-color' + ' option[value="' + rval + '"]').prop('selected', true); $('.select-color').selectmenu('refresh'); };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <select name="color" class="select-color"> <option value="1" selected>Red</option> <option value="2">Green</option> <option value="3">Blue</option> </select> <br><br> <input type="radio" name="color" value="1" checked="checked" /> Red<br /> <input type="radio" name="color" value="2" /> Green<br /> <input type="radio" name="color" value="3" /> Blue<br /> </form>
*更新*在我切換到使用Bootstrap Select插件后,我需要更新@JoshCrozier提供的代碼。 對於那些感興趣的人,這里是:
function updateElements(e) {
var valueAttribute = e.target.value;
$('select[name="color"]').val(valueAttribute);
$('.select-color').selectpicker('refresh');
$('input[name="color"]' + valueAttribute).prop('checked', true);
}
$('select[name="color"], input[name="color"]').change(updateElements);
使用以下方法收聽兩個元素的change
事件:
$('.select-color, input[name="color"]').change(updateElements);
。
然后使用e.target.value
獲取觸發元素的值。
function updateElements(e) {
var valueAttribute = '[value="' + e.target.value + '"]';
$('.select-color option' + valueAttribute).prop('selected', true);
$('input[name="color"]' + valueAttribute).prop('checked', true);
}
$('.select-color, input[name="color"]').change(updateElements); function updateElements(e) { var valueAttribute = '[value="' + e.target.value + '"]'; $('.select-color option' + valueAttribute).prop('selected', true); $('input[name="color"]' + valueAttribute).prop('checked', true); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <select name="color" class="select-color"> <option value="1" selected>Red</option> <option value="2">Green</option> <option value="3">Blue</option> </select> <br> <br> <input type="radio" name="color" value="1" checked="checked" />Red <br /> <input type="radio" name="color" value="2" />Green <br /> <input type="radio" name="color" value="3" />Blue <br /> </form>
另外..
雖然這會使函數更長一些,但您還可以添加一些條件邏輯來確定觸發元素是否是這樣的select
/ radio
:
function updateElements(e) {
var $element = $(e.target),
valueAttribute = '[value="' + $element[0].value + '"]';
if ($element.is(':radio')) {
$('.select-color option' + valueAttribute).prop('selected', true);
} else {
$('input[name="color"]' + valueAttribute).prop('checked', true);
$('.select-color').selectmenu('refresh');
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.