javascript - 如何使用 jquery 更改选定的菜单选项

Question

您好，我正在使用 jquery 选择的插件。我想通过从其他选择菜单中选择的值来选择菜单值。但是我的代码使用简单的选定菜单。我希望它与 jquery 选择的插件一起使用。示例 code

$(".chzn-select").chosen()
    $('[id*=second]').change(function(){
    var val = $(this).find('option:selected').val()

    if(val.toLowerCase()=='mr'){
    $('[id*=gender]').find('option').eq(0).attr('selected', 'selected');
}

else{       
    $('[id*=gender]').find('option').eq(1).attr('selected', 'selected')
     }
})
​

Answer 1

您应该将 value 添加到选项中并尝试匹配这些值 onchange。请参阅下面我的实现，让我知道它是否适合您。

编辑:添加了几行来更新插件选择。

演示: http://jsfiddle.net/vUkQg/3/

Note: Below method can relate any number of drop downs with just same class and value.(no change to the script) http://jsfiddle.net/vCE4Y/18/

HTML:

<select id="second" class="chzn-select" style="width:100px">
  <option value="1"> mr</option>
  <option value="2"> mrs</option>
</select>

<select id="gender" class="chzn-select" style="width:100px">
  <option value="1"> male</option>
  <option value="2"> female</option>
</select>

JS:

$(function() {
    $(".chzn-select").chosen().change(function() {
        var val = $(this).val();
        $('.chzn-select').val(val);

        $('.chzn-select').not(this).each(function () {                       
            var $chzn = $('#' + this.id + '_chzn');
            var $li = $chzn.find('li');            
            $li.removeClass('result-selected');  

            var selectedLi = $li.eq(val - 1);
            selectedLi.addClass('result-selected');

            $chzn.find('a.chzn-single span').html(selectedLi.html());            
            //update selected result in plugin
            var $data = $(this).data('chosen');

            $.each($data['results_data'], function (idx, el) {
                if (idx == val-1) {
                    el.selected = true;
                    $data.result_single_selected = selectedLi;
                } else {
                    el.selected = false;
                }
            });
        });
    });
});