Question

我有一个隐藏的选择，应该通过可见的选择自动选择，我的jquery是：

$(document).ready(function() {

    var selected_val = $('#id_foo option:selected').val();
    $('#id_bar').val(selected_val);

    $("#id_foo").change(function() {
        selected_val = $(this).attr('value');
        $('#id_bar').val(selected_val);
    });

});

这很好用，但我正在处理的页面可以选择动态地向（可见）选择添加值。如何绑定到此事件并在更新所选值之前将其添加到隐藏列表？

Answer 1

解决此问题的最佳方法是在更新可见的值时使用新值更新隐藏的选择。

或者，根据我的评论，您可以在可见的更改时填充隐藏的select：

$("#id_foo").change(function() {
    selected_val = $(this).attr('value');

    //clear and re-populate all of hidden select here
    $('#id_bar').val(selected_val);
});

Answer 2

这应该可以解决问题：

$(function () {
    var $bar = $('#id_bar');
    var $foo = $('#id_foo');

    $bar.val($foo.val());

    $foo.change(function () {
        var newValue = $(this).val();
        if ($bar.find('[value="' + newValue + '"]').length === 0) {
            $bar.append($('<option/>').val(newValue));
        }
        $bar.val(newValue);
    });
});

在设置新值之前，请检查该值是否为选项。如果不是，请添加选项。

Answer 3

此代码段正确识别事件，并成功将选择选项从foo复制到bar。但是，它似乎无法在:selected或id_foo上正确设置id_bar，并且使用DOMSubtreeModified会感到虚伪

$('#id_foo').bind("DOMSubtreeModified", function(){
    var high = 0;
    $('#id_foo').children().each(
        function(){
            if ($(this).val() > high) {
                high = $(this).val();
            }
        }
    );
    $('#id_foo').val(high);
    var new_options = $('#id_foo').clone();
    $('#id_bar').html('');
    $('#id_bar').append(new_options.children());
});

所以，现在我能想出最好的结果：

$('#id_foo').bind("DOMSubtreeModified", function(){
    location.reload();
});

jquery绑定以选择更改

3 个答案: