javascript - jQuery show/hide options if first one selected, shows second selected option by default
问题描述
If I selected 3 column I want to get default value - layout 4
selected="selected"
this works only in column_select
but does not work in second layout_select
form.
What/where I should add or change in code?
$(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>
解决方案
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();
})
推荐阅读
- c# - Roslyn - 使用 CSharpCompilation 编译程序集以在 CSharpCompilation 编译的另一个程序中使用
- sql-server - SSRS 无法在报表生成器中连接到 SQL Server
- ruby-on-rails - Ruby-Rails 网络 ldap 搜索
- java - 无法使用 MSAL4J 用户名-密码流验证 MS Graph
- r - R:在 data.frame 中对数值数据进行排名
- c# - 如何跨越
和 stackalloc 创建一个临时的小列表 - javascript - 在查询无法正常工作的情况下推入 forEach
- svg - 如何更改此 svg 图标的颜色?
- google-sheets - 有没有办法将最后一次出现的重复值和/或一列的唯一值返回到另一列?
- swift - 如何使用文件路径以编程方式从按钮打开应用程序?斯威夫特 4,MacOS 10.13+