Question

我有多个依赖下拉，从我的数据库中获取。第一个下拉列表将选择eOpp，第二个下拉列表将基于第一个下拉列表中选定的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");                                                               
        }
    });
}

它可以很好地生成两个下拉列表。但是当第一次下拉（选择eOpp）发生变化时，第二次下拉仍然是我下拉中的前一个值。我使用这个multiSelect作为我在basics1下的第二个下拉菜单。 jquery.multiple.select.js

例如，当我选择第一个eOpp时，结果将是这样的：

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

但在我更改选择eOpp 后，它会变成这样：

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

它将保留先前的值 eOpp = 1 ，但当我使用php $_POST时，我没有任何价值。当我更改选择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) {

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

2 个答案: