[英]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
aplha
出現在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-loop 您可以從拆分數組中獲取值,最后使用$("#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>
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.