如果我选择了 3列,我想获取默认值-布局4
selected="selected"
仅适用于column_select
,但不适用于第二layout_select
形式。
我应该在什么地方添加或更改代码?
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}).change();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1">none</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm" selected="selected">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
答案 0 :(得分:1)
https://codepen.io/phong18/pen/aboLdGG 更新您的js:
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
var selected = '';
if($(this).attr('selected')){
selected = "selected='"+ $(this).attr('selected')+"'";
}
return {
"value": this.value,
"option": "<option value='" + this.value + "' "+selected+" >" + this.text + "</option>"
}
})
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}).change();
})
答案 1 :(得分:0)
也保存所选状态
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": `<option value="$(this.value}"${this.defaultSelected?" selected":""}>${this.text}</option>`,
}
})
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}).change();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1">none</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm" selected="selected">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
答案 2 :(得分:0)
使用clone()
和filter()
的简单方法。
您在页面加载时存储了一组克隆的选项。对于每个更改,您都会再次克隆存储的集,并根据所选的值对其进行过滤。
var $clonedOpts = $("#layout_select").children().clone();
$("#column_select").change(function() {
var $layOpts = $clonedOpts.clone().filter('[value^=' + $(this).val() + ']');
$("#layout_select").html($layOpts);
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1">none</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm" selected="selected">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>