僅當選擇了其他選擇的選項時，如何顯示選擇？

Question

我在頁面上有4個選擇，只有第一個可見。 同樣，第一個選擇具有基本的提示字符串： 選擇這樣的人 ：

<select name="post[person_id]">
  <option value="">Choose person</option>
  <option value="1">David</option>
  <option value="2">Sam</option>
  <option value="3">Tobias</option>
</select>

一旦用戶從第一個下拉菜單中選擇了某個選項，其他三個選項就必須顯示出來。

如何執行呢？

Answer 1

這是一個簡單的jquery解決方案。 關鍵是使用.change事件並將其連接到您的下拉列表。

HTML

    <select id="controllerDD">
        <option value="">Select...</option>
        <option value="Show 1">Show 1</option>
        <option value="Show 2">Show 2</option>
        <option value="Show All">Show All</option>
    </select>
    <p>DD 1</p>
    <select id="DD1" style="display:none">
        <option value="blah">Select...</option>
        <option value="blah">blah</option>
        <option value="blah">blah</option>
        <option value="blah">blah</option>
    </select>
    <p>DD 2</p>
    <select id="DD2" style="display:none">
        <option value="blah">Select...</option>
        <option value="blah">blah</option>
        <option value="blah">blah</option>
        <option value="blah">blah</option>
    </select>

JavaScript的

$('#controllerDD').change(function (e) {
    var selected = $(e.currentTarget).val();
    $('#DD1').hide();
    $('#DD2').hide();
    switch (selected) {
        case "Show 1":
            $('#DD1').show();
            break;
        case "Show 2":
            $('#DD2').show();
            break;
        case "Show All":
            $('#DD1').show();
            $('#DD2').show();
            break;
        default:
            break;
    }
})

Answer 2

您必須使用onchange方法。

<select onchange="myFunction()">

<script>
function myFunction(){

// fetch new data for the next select. 

//append the new options on next select. 

// make select available or enabled 

}

</script>

對於第一個選擇，請使用onchange來獲取 （填充） 下一個選擇的選項。 並對以下選擇執行相同的操作。

您也可以在完成填充選擇的實例中獲取並使其可用。

如果您不使用jQuery 。 您可以附加選項