0

表示された選択を介して自動的に選択される非表示の選択があります。私の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);
    });

});

これは正常に機能しますが、作業中のページには、その場で（表示されている）選択に値を追加するオプションがあります。選択した値を更新する前に、このイベントにバインドして非表示リストに追加するにはどうすればよいですか？

4

3 に答える 3

2

これに取り組む最善の方法は、表示されている値を更新するときに、非表示の選択を新しい値で更新することです。

または、私のコメントによると、select表示されているものが変更されたときに非表示に設定することができます：

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

    //clear and re-populate all of hidden select here
    $('#id_bar').val(selected_val);
});
于 2012-08-07T11:10:07.613 に答える
0

このスニペットはイベントを正しく識別し、選択オプションを foo から bar に正常にコピーします。ただし、どちら:selectedにも正しく設定されていないようであり、DOMSubtreeModified を使用するとハックのように感じますid_fooid_bar

$('#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();
});
于 2012-08-07T14:55:17.460 に答える
0

これでうまくいくはずです：

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

新しい値を設定する前に、値がオプションかどうかを確認します。そうでない場合は、オプションとして追加します。

于 2012-08-07T11:33:23.713 に答える