我的HTML页面中有2个选择输入
<select id="parent">
<option value="1">One</option>
<option value="2">Two</option>
</select>
并且
<select name="selectOpt" id="dmSelect">
<option disabled selected >-Select an Option-</option>
</select>
现在我需要添加一些选项,具体取决于parent
如果选择one
,则selectOpt
的选项将为
<option value="a1">a1</option>
<option value="a2">a2</option>
如果选择two
,selectOpt
的选项将为
<option value="b1">b1</option>
<option value="b2">b2</option>
这些选项将来自某些数组 喜欢
A=["a1","a2"...]
B=["b1","b2"...]
答案 0 :(得分:2)
做这样的事,
$('#parent').on('change', function(e) {
var that = $(this).val();
switch(that) {
case 1:
$("#dmSelect").append(
$('<option/>', {
value: a1,
html: a1
},{
value: a2,
html: a2
})
);
});
break;
case 2:
$("#dmSelect").append(
$('<option/>', {
value: b1,
html: b1
},{
value: b2,
html: b2
})
);
});
break;
default:
//default code block
}
答案 1 :(得分:0)
以下是使用普通javascript执行此操作的方法:
<select id="parent" onChange="addOption()">
<option value="1">One</option>
<option value="2">Two</option>
</select>
然后在脚本中:
function addOption(){
var e = document.getElementById("parent");
var strUser = e.options[e.selectedIndex].text;
if(strUser == 'One'){
selecOpt = document.getElementById('dmSelect');
var opt = document.createElement('option');
opt.value = 'a1';
opt.innerHTML = a1;
selecOpt.appendChild(opt);
opt = document.createElement('option');
opt.value = 'a2';
opt.innerHTML = a2;
selecOpt.appendChild(opt);
}
else if(strUser == 'Two'){
selecOpt = document.getElementById('dmSelect');
var opt = document.createElement('option');
opt.value = 'b1';
opt.innerHTML = b1;
selecOpt.appendChild(opt);
opt = document.createElement('option');
opt.value = 'b2';
opt.innerHTML = b2;
selecOpt.appendChild(opt);
}
}
答案 2 :(得分:0)
您应该尝试自己解决问题,如果遇到困难,我们可以提供帮助。
首先,你需要创建一个触发select change()
值更改的函数。
然后,您需要获取此select val()
的值。
接下来,将您的选项的价值和值append()
与下一个选项进行比较。
如果您先尝试一下我们可以帮助您,您将学到更多东西,然后再复制粘贴。
答案 3 :(得分:0)
Here is the sample code. Here I have appended new values. Instead of that by making ajax call you can get options values from db too.
$("#parent").on("change",function(){
if ( $(this).val() == "one")
{
var newValue = '<option value="b1">b1</option>';
newValue += '<option value="b2">b2</option>';
$("#dmSelect").append(newValue);
}
});
答案 4 :(得分:0)
$(document).ready(function () {
$("#parent").change(function () {
var $dmSelect = $("#dmSelect");
$dmSelect.empty().append("<option disabled selected >-Select an Option-</option>")
if ($(this).find("option:selected").val() == "1") {
$dmSelect.append("<option value='a1'>A1</option>")
.append("<option value='a2'>A2</option>")
} else if ($(this).find("option:selected").val() == "2") {
$dmSelect.append("<option value='b1'>B1</option>")
.append("<option value='b2'>B2</option>")
}
/*other if elses*/
}).change();
});
答案 5 :(得分:0)
这是一个可以轻松适应您需求的解决方案,从某些阵列中读取辅助选项。
JS:
//make one array from all your sub-arrays
var A = ['a1','a2','a3'];
var B = ['b1','b2'];
var arr = [A,B];
//grabs the first sub-array by default
$(function() {changeOpts(1);});
//changing the parent grabs the appropriate sub-array
$('#parent').on('change', function() {
changeOpts($(this).val());
});
//forms a string with a bunch of <option> tags, then puts that inside #dmSelect
function changeOpts(parentOpt) {
var str = '<option disabled selected >-Select an Option-</option>';
var arr2 = arr[parentOpt-1];
var len = arr2.length;
for (var i=0; i<len; i++) {
var value = arr2[i];
str += '<option value="' + value + '">' + value + '</option>';
}
$('#dmSelect').html(str);
}
这里是fiddle。
答案 6 :(得分:0)
两个阵列:
A=[{display: "a1", value: "a1" },
{display: "a2", value: "a2" },
........
]
B=[{display: "b1", value: "b1" },
{display: "b2", value: "b2" },
........
]
现在正在改变
$('#parent').change(function() {
var parent = $(this).val();
$("#dmSelect").html("");`
switch(parent) {
case 1:
$(A).each(function (i)
{
$("#dmSelect").append("<option value=\""+A[i].value+"\">"+A[i].display+" </option>");
});
break;
case 2:
$(B).each(function (i)
{
$("#dmSelect").append("<option value=\""+B[i].value+"\">"+B[i].display+"</option>");
});
break;
default:
}
});