有2个下拉列表,第2个取决于第1个。
相同的代码在Chrome / Firefox中工作正常,但在IE中不工作
以下是JQuery代码:
$(document).ready(function() {
$("#CurrencyPair").children('option:gt(0)').hide();
$("#part1currency").change(function() {
$("#CurrencyPair").children('option').hide();
$("#CurrencyPair").children("option[value^=" + $(this).val() + "]").show();
});
});
以下是HTML代码:
<select name="part1currency" id="part1currency">
<option value="Select">Select</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="GBP">GBP</option>
</select>
<select name="CurrencyPair" id="CurrencyPair">
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="Select">--Select--</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="EUR/USD">EUR/USD</option>
<option value="col2_sm">layout 2</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="USD/EUR">USD/EUR</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
最佳答案
我已经找到了上述问题的一种解决方案。
$(document).ready(function() {
var optarray = $("#CurrencyPair").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + " `enter code here`</option>"
}
})
$("#part1currency").change(function() {
$("#CurrencyPair").children('option').remove();
var addoptarr = [];
addoptarr.push(optarray[0].option);
for (i = 1; i < optarray.length; i++) {
if (optarray[i].value.substring(0, 3).indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#CurrencyPair").html(addoptarr.join(''))
}).change();
})