根据另一个下拉列表动态更新下拉列表?
Dynamically update a dropdown list based on another dropdown list?
我有一个带有 id='apha'
的下拉列表,其中包含三个选项,它们的值以逗号分隔。
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
另一个包含值的下拉菜单 beta
。根据在 alpha
中选择的选项,这些值应该在第二个下拉列表中 beta
。
<select class="browser-default" id="beta">
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>
因此,如果从 alpha
下拉列表中选择 One
。只有 aplha
- a,b,c
的值应该出现在 beta
下拉列表中 - First Second Third
我尝试过的:
没有逗号分隔的值
$('#alpha').on('change', function () {
$('#alpha').html('');
if ($('#alpha').val() == "One") {
$('#alpha').append('<option value="a">First</option>');
$('#alpha').append('<option value="b">Second</option>');
$('#alpha').append('<option value="c">Third</option>');
}
});
您可以使用 split(',')
拆分值,然后使用 for 循环从拆分数组中获取值,最后使用 $("#beta option[value=" + vals + "]").show()
显示值匹配的选项。
演示代码:
$("#alpha").on("change", function() {
var values = $(this).val().split(',') //split value which is selected
$("#beta option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#beta option[value=" + vals + "]").show()//show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
<select class="browser-default" id="beta">
<option selected="selected" value="">--select one-- </option>
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>
香草 JS
const beta = document.getElementById('beta');
const betaOpts = [...beta.children];
document.getElementById('alpha').addEventListener(
'change',
(e) => {
beta.innerHTML = betaOpts.filter(
o => e.target.value.includes(o.value)
).map(o => o.outerHTML).join('')
})
<label>Alpha</label>
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
<label>Beta</label>
<select class="browser-default" id="beta">
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>
我有一个带有 id='apha'
的下拉列表,其中包含三个选项,它们的值以逗号分隔。
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
另一个包含值的下拉菜单 beta
。根据在 alpha
中选择的选项,这些值应该在第二个下拉列表中 beta
。
<select class="browser-default" id="beta">
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>
因此,如果从 alpha
下拉列表中选择 One
。只有 aplha
- a,b,c
的值应该出现在 beta
下拉列表中 - First Second Third
我尝试过的: 没有逗号分隔的值
$('#alpha').on('change', function () {
$('#alpha').html('');
if ($('#alpha').val() == "One") {
$('#alpha').append('<option value="a">First</option>');
$('#alpha').append('<option value="b">Second</option>');
$('#alpha').append('<option value="c">Third</option>');
}
});
您可以使用 split(',')
拆分值,然后使用 for 循环从拆分数组中获取值,最后使用 $("#beta option[value=" + vals + "]").show()
显示值匹配的选项。
演示代码:
$("#alpha").on("change", function() {
var values = $(this).val().split(',') //split value which is selected
$("#beta option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#beta option[value=" + vals + "]").show()//show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
<select class="browser-default" id="beta">
<option selected="selected" value="">--select one-- </option>
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>
香草 JS
const beta = document.getElementById('beta');
const betaOpts = [...beta.children];
document.getElementById('alpha').addEventListener(
'change',
(e) => {
beta.innerHTML = betaOpts.filter(
o => e.target.value.includes(o.value)
).map(o => o.outerHTML).join('')
})
<label>Alpha</label>
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
<label>Beta</label>
<select class="browser-default" id="beta">
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>