jquery selectbox：如果选择了最后一个选项，则使用其他下拉值重新加载 Jquery Selectbox答案

【问题标题】：jquery selectbox : Reload Jquery Selectbox with other drop down values if last option is selectedjquery selectbox：如果选择了最后一个选项，则使用其他下拉值重新加载 Jquery Selectbox
【发布时间】：2012-03-19 13:17:55
【问题描述】：

当使用新值选择最后一个选项时，如何刷新 jquery 多选？就像我的选择框中有以下选项一样

<select id="positions">
    <option value="0">Programmer</option>
    <option value="1">Tester</option>
    <option value="2">Manager</option>
    <option value="3">Admin</option>
    <option value="4">Load all other</option>    
</select>

如果用户从选择框中选择“加载所有其他”选项，则应使用不同的值重新初始化此选择框。或者是否可以在一个使用粗线分隔的选择框中填充两个下拉值。

【问题讨论】：

标签： jquery jquery-ui jquery-selectbox

【解决方案1】：

HTML 部分：

<select id="positions">
    <option value="0">Programmer</option>
    <option value="1">Tester</option>
    <option value="2">Manager</option>
    <option value="3">Admin</option>
    <option value="4">Load all other</option>    
</select>

<select id="positions2">
    <option value="0">test1</option>
    <option value="1">test2</option>
    <option value="2">test3</option>
    <option value="3">test4</option>
    <option value="4">Load all other</option>    
</select>

jQuery部分：

$('#positions').change(function() {
    if ($('#positions').val() == 4) {
        var data = $('#positions2').html();
        $('#positions').html(data );
    }
});

这是Jsfiddle 示例：

【讨论】：

【解决方案2】：

我想我明白你的意思。这能解决问题吗？

$('#positions').change(function() {
    if ($('#positions').val() === '4') {
        var newOptions = '<option value="0">Programmer</option>';
        newOptions += '<option value="1">Tester</option>';
        newOptions += '<option value="2">Manager</option>';
        newOptions += '<option value="3">Admin</option>';
        newOptions += '<option value="5">Helicopter Pilot</option>';
        newOptions += '<option value="6">Fireman</option>';
        newOptions += '<option value="7">President of the United States</option>';
        $('#positions').html(newOptions);
    }        
});

【讨论】：

感谢您的回复...但我需要将不同下拉列表中的值..重新初始化下拉列表与其他下拉值
嗯。构造一个新字符串然后使用 .html() 函数会不起作用吗？如果不是，那么我不确定我是否理解这个问题。在我的示例中，您不必包含选项 0-3。

【解决方案3】：

使用来自其他选择框的值加载 $('#positions')

$('#positions').html( $('#otherSelectBox').html() );

但是如果同一个用户仍然想查看之前的选择怎么办？我认为您应该将 $('#positions') 附加到下一个值并隐藏上一个

$('#positions').children('option').hide().end().append( $('#otherSelectBox').html() );

【讨论】：