使用jQuery选择更改选择列表上的单选按钮，反之亦然

Question

单选按钮和选择列表包含相同的值。 如果选择列表发生变化，我需要选择相应的单选按钮，反之亦然。

我到目前为止，但我很难将这些功能结合起来......任何帮助都非常感激。

检查小提琴

 $('.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);

Answer 1

使用以下方法收听两个元素的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');
    }
}

替代例子