如何检索下拉列表中的数组值列表

我想在下拉列表中填充值列表。

这是我的代码，我已经尝试过，但我不知道如何继续与数组值列表。请提出建议，以便我能完成我的任务。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function populate_dropdown(country)
{
    switch(country)
    {
        case "america":
            document.forms[0].states.length = 2;
            document.forms[0].states.disabled = false;
            document.forms[0].states.options[0].text = 'Washington';
            document.forms[0].states.options[0].value = 'Washington';
            document.forms[0].states.options[1].text = 'Florida';
            document.forms[0].states.options[1].value = 'Florida';
            break;
        case "india":
            document.forms[0].states.length = 2;
            document.forms[0].states.disabled = false;
            document.forms[0].states.options[0].text = 'Orissa';
            document.forms[0].states.options[0].value = 'Orissa';
            document.forms[0].states.options[1].text = 'Punjab';
            document.forms[0].states.options[1].value = 'Punjab';
            break;
        default:
            document.forms[0].states.length = 1;
            document.forms[0].states.options[0].text = 'Select a country first';
            document.forms[0].states.disabled = true;
    }
}
</script>
</head>
<body>
<form action="this.html" method="post">
<p>
<input id="America" type="radio" name="country" value="America" onclick="populate_dropdown('america')" /><label for="America">America</label><br />
<input id="India" type="radio" name="country" value="India" onclick="populate_dropdown('india')" /><label for="India">India</label><br />
<select disabled="disabled" name="states">
<option>Select a country first</option>
</select>
</p>
</form>
</body>
</html>

你想要这样的东西吗?

states = {
    "america": [
        { "text": "Washington", "value": "Washington" },
        { "text": "Florida", "value":  "Florida" },
    ],
    "india": [
        { "text": "Orissa", "value": "Orissa" },
        { "text": "Punjab", "value": "Punjab" },
    ],
};
function populate_dropdown(country) {
    if(!states[country]) {
        document.forms[0].states.options = [];
        document.forms[0].states.disabled = true;
        return;
    }
    
    document.forms[0].states.options.length = 0;
    for(var i = 0; i < states[country].length; i++) {
        var state = states[country][i];
        document.forms[0].states.options[i] = new Option(state.text, state.value, false, false);
    }
    document.forms[0].states.disabled = false;
}

<form action="this.html" method="post">
    <p>
        <input id="America" type="radio" name="country" value="America" onclick="populate_dropdown('america')" />
        <label for="America">America</label>
        <br />
        <input id="India" type="radio" name="country" value="India" onclick="populate_dropdown('india')" />
        <label for="India">India</label>
        <br />
        <select disabled="disabled" name="states">
            <option>Select a country first</option>
        </select>
    </p>
</form>

你可以在下面使用更新后的代码

<!DOCTYPE html><html> <head>
  <script type="text/javascript">
     function populate_dropdown(country)
     {
        e=document.forms[0].states;
         switch(country)
         {
             case "america":
                 document.forms[0].states.length = 2;
                 document.forms[0].states.disabled = false;
                 document.forms[0].states.options[0].text = 'Washington';
                 document.forms[0].states.options[0].value = 'Washington';
                 document.forms[0].states.options[1].text = 'Florida';
                 document.forms[0].states.options[1].value = 'Florida';
             // current selected value  alert(document.forms[0].states.options[e.selectedIndex].value);
             break;
             case "india":
                 document.forms[0].states.length = 2;
                 document.forms[0].states.disabled = false;
                 document.forms[0].states.options[0].text = 'Orissa';
                 document.forms[0].states.options[0].value = 'Orissa';
                 document.forms[0].states.options[1].text = 'Punjab';
                 document.forms[0].states.options[1].value = 'Punjab';
                 break;
             default:
                 document.forms[0].states.length = 1;
                 document.forms[0].states.options[0].text = 'Select a country first';
                 document.forms[0].states.disabled = true;
         }
     }
        function dropdown_selected_value(){ 
            alert(document.forms[0].states.options[e.selectedIndex].value);
        }
  </script> </head> <body>
  <form action="this.html" method="post">
     <p>
        <input id="America" type="radio" name="country" value="America" onclick="populate_dropdown('america')" /><label for="America">America</label><br />
        <input id="India" type="radio" name="country" value="India" onclick="populate_dropdown('india')" /><label for="India">India</label><br />
        <select disabled="disabled" name="states" onchange="dropdown_selected_value()">
           <option>Select a country first</option>
        </select>
     </p>
  </form> </body> </html>

相关内容

最新更新

热门标签：