Select 单选按钮更改 select 列表，反之亦然使用 jQuery

Question

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

我已经走到这一步了，但我很难结合这些功能...非常感谢任何帮助。

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

Updated Example

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

Alternative Example

Select 单选按钮更改 select 列表，反之亦然使用 jQuery

Select radio button on change select list and vice versa using jQuery

javascript

jquery

select

onchange

radio-button