javascript - jquery binding to select changes

Question

I have a hidden select which should be automatically selected via a visible select, my jquery is:

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

});

This works fine, but the page I am working on has the option to add a value to the (visible) select on the fly. How do I bind to this event and add this to the hidden list before updating the selected value?

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

此代码段正确识别事件并成功地将选择选项从 foo 复制到 bar。但是，它似乎没有:selected正确设置，id_foo或者id_bar使用 DOMSubtreeModified 感觉很hackish

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

Answer 3

这应该可以解决问题：

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

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