选择其他值后清除相关下拉列表
Clear dependent drop down once other value is selected
我有多个从我的数据库中获取的依赖下拉列表。
第一个下拉列表将 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%'
});
});
销毁和重新初始化应该有效:
$("#item").multiselect('destroy');
$("#item").multiselect();
在我更改了 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) {
我有多个从我的数据库中获取的依赖下拉列表。 第一个下拉列表将 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%'
});
});
销毁和重新初始化应该有效:
$("#item").multiselect('destroy');
$("#item").multiselect();
在我更改了 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) {