[英]jQuery: show / hide Div when first or second radio button is selected
[英]jQuery show/hide options if first one selected, shows second selected option by default
如果我選擇了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>
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();
})
也保存選擇的狀態
$(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>
使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.