选择其他值后清除相关下拉列表

Question

我有多个从我的数据库中获取的依赖下拉列表。第一个下拉列表将 select eOpp，第二个下拉列表将基于第一个下拉列表的 selected eOpp。

//First Drop down
<label>Select eOpp</label>
<?php erfq_generateOppDropdown($oppID,"erfq_rfq_oppID");?>

//Second Drop down
<label>Select Item</label>
<select id="item" name="item[]" multiple="multiple">
</select>

这是我的 ajax 从第一个下拉列表中获取值。

function getItem(val) {
    $.ajax({                        
        type: "POST",
        url: "get_item.php",
        data:'erfq_rfq_oppID='+val,
        success: function(data){                    
            $("#item").empty().html(data);          
            $("#item").multipleSelect("refresh");                                                               
        }
    });
}

生成两个下拉列表都很好。但是当第一个下拉列表 (Select eOpp) 发生变化时，第二个下拉列表仍将保留我下拉列表中的先前值。我将这个 multiSelect 用于我在 basics1 下的第二个下拉菜单。 jquery.multiple.select.js

例如，当我 select 编辑第一个 eOpp 时，结果将是这样的：

Select eOpp: 1
Select Item: 
Item 1(A)
Item 1(B)

但是我把SelecteOpp改了之后就变成这样了：

Select eOpp: 2
Select Item: 
Item 1(A)
Item 1(B)
Item 2(A)

它将保留以前的值，其中 eOpp=1 但是当我使用 php 到 $_POST 时，我没有得到任何值。当我更改 Select eOpp
时，我必须相应地删除以前的记录编辑
问题出现在multiSelect实现的时候。

$(function() {
    $('#item').change(function() {
        console.log($(this).val());
    }).multipleSelect({
        width: '100%'
    });
});

Answer 1

销毁和重新初始化应该有效：

$("#item").multiselect('destroy');
$("#item").multiselect();

Answer 2

在我更改了 multiSelect 插件后，它与我的代码配合得很好。更多信息，请参阅JSFiddle。函数的一些变化是

1) function MultipleSelect($el, options)


2) MultipleSelect.prototype = {
    constructor : MultipleSelect,

    init: function() {
        var that = this,
            html = [];
        if (this.options.filter) {
            html.push(
                '<div class="item-search">',
                    '<input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false">',
                '</div>'
            );
        }
3) optionToHtml: function (i, elm, group, groupDisabled) {

选择其他值后清除相关下拉列表

Clear dependent drop down once other value is selected

php

jquery

ajax

drop-down-menu

multi-select