javascript：动态下拉菜单值答案

【问题标题】：javascript: dynamic drop down menu valuesjavascript：动态下拉菜单值
【发布时间】：2020-07-20 02:14:52
【问题描述】：

我想创建两个下拉表单，如果我在第一个菜单上选择一个项目，第二个菜单将显示相应的值。例如：如果我在第一个菜单上选择“水果”，那么第二个菜单将显示“苹果”、“香蕉”等。它必须有值，所以我可以将它插入数据库。

html如下：

<select id="firstmenu" name="fruit">
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<br/>
<select id="secondmenu" name="vegetable">
<option value="carrot">carrot</option>
<option value="celery">celery</option>
</select>

javascript;我正在考虑使用这样的东西，但我对 javascript 缺乏了解

<script>
var a=document.forms["myform"]["fruit"].value;
var b=document.forms["myform"]["vegetable"].value;

if (a=="fruit")
{
...
}
</script>

谁能给我一个代码示例？非常感谢您的帮助，谢谢。

【问题讨论】：

标签： javascript html

【解决方案1】：

嗯，

使用 jQuery 怎么样？

var items = [{
    name: '---',
    value: '',
    subitems: []
  },
  {
    name: 'Fruit',
    value: 'fruit',
    subitems: [{
        name: 'Apple',
        value: 'apple'
      },
      {
        name: 'Banana',
        value: 'banana'
      }
    ]
  },
  {
    name: 'Vegetable',
    value: 'vegetable',
    subitems: [{
        name: 'Carrot',
        value: 'carrot'
      },
      {
        name: 'Celery',
        value: 'celery'
      }
    ]
  }
];


$(function() {
  var temp = {};

  $.each(items, function() {
    $("<option />")
      .attr("value", this.value)
      .html(this.name)
      .appendTo("#firstmenu");
    temp[this.value] = this.subitems;
  });

  $("#firstmenu").change(function() {
    var value = $(this).val();
    var menu = $("#secondmenu");

    menu.empty();
    $.each(temp[value], function() {
      $("<option />")
        .attr("value", this.value)
        .html(this.name)
        .appendTo(menu);
    });
  }).change();


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="firstmenu" name="fruit"></select>
<br/>
<select id="secondmenu" name="vegetable"></select>

【讨论】：

页面不存在。

【解决方案2】：

我使用 Javascript 创建了一个下拉菜单。然后，如果用户在主下拉菜单中选择了水果，我创建了“水果”选项，如果用户在主下拉菜单中选择了蔬菜，我创建了“蔬菜”选项。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function displayAccordingly() {

            //Call mainMenu the main dropdown menu
            var mainMenu = document.getElementById('mainMenu');

            //Create the new dropdown menu
            var whereToPut = document.getElementById('myDiv');
            var newDropdown = document.createElement('select');
            newDropdown.setAttribute('id',"newDropdownMenu");
            whereToPut.appendChild(newDropdown);

            if (mainMenu.value == "fruit") { //The person chose fruit

                //Add an option called "Apple"
                var optionApple=document.createElement("option");
                optionApple.text="Apple";
                newDropdown.add(optionApple,newDropdown.options[null]);

                //Add an option called "Banana"
                var optionBanana=document.createElement("option");
                optionBanana.text="Banana";
                newDropdown.add(optionBanana,newDropdown.options[null]);

            } else if (mainMenu.value == "vegetable") { //The person chose vegetabes

                //Add an option called "Spinach"
                var optionSpinach=document.createElement("option");
                optionSpinach.text="Spinach";
                newDropdown.add(optionSpinach,newDropdown.options[null]);

                //Add an option called "Zucchini"
                var optionZucchini=document.createElement("option");
                optionZucchini.text="Zucchini";
                newDropdown.add(optionZucchini,newDropdown.options[null]);

            }

        }
    </script>
</head>
    <body>
        <select id="mainMenu" onchange="displayAccordingly()">
        <option value="">--</option>
        <option value="fruit">Fruit</option>
        <option value="vegetable">Vegetable</option>
        </select>
        <div id="myDiv"></div>
    </body>

</html>

每当下拉菜单的值发生变化时，函数 displayAccordingly() 就会运行。它创建一个新的下拉菜单，然后，如果主下拉菜单的值为水果，则将水果选项添加到新创建的下拉菜单中，如果主下拉菜单的值为蔬菜，则添加蔬菜选项到新创建的下拉菜单。

我希望这会有所帮助！ :)

编辑：如果您更改下拉菜单的值两次，它会创建 2 个下拉菜单。我添加了另一个变量来解决这个问题：

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript">
    var created = 0;

        function displayAccordingly() {

            if (created == 1) {
                removeDrop();
            }

            //Call mainMenu the main dropdown menu
            var mainMenu = document.getElementById('mainMenu');

            //Create the new dropdown menu
            var whereToPut = document.getElementById('myDiv');
            var newDropdown = document.createElement('select');
            newDropdown.setAttribute('id',"newDropdownMenu");
            whereToPut.appendChild(newDropdown);

            if (mainMenu.value == "fruit") { //The person chose fruit

                //Add an option called "Apple"
                var optionApple=document.createElement("option");
                optionApple.text="Apple";
                newDropdown.add(optionApple,newDropdown.options[null]);

                //Add an option called "Banana"
                var optionBanana=document.createElement("option");
                optionBanana.text="Banana";
                newDropdown.add(optionBanana,newDropdown.options[null]);

            } else if (mainMenu.value == "vegetable") { //The person chose vegetabes

                //Add an option called "Spinach"
                var optionSpinach=document.createElement("option");
                optionSpinach.text="Spinach";
                newDropdown.add(optionSpinach,newDropdown.options[null]);

                //Add an option called "Zucchini"
                var optionZucchini=document.createElement("option");
                optionZucchini.text="Zucchini";
                newDropdown.add(optionZucchini,newDropdown.options[null]);

            }

            created = 1

        }

        function removeDrop() {
            var d = document.getElementById('myDiv');

            var oldmenu = document.getElementById('newDropdownMenu');

            d.removeChild(oldmenu);
        }
    </script>
    </head>
    <body>
        <select id="mainMenu" onchange="displayAccordingly()">
        <option value="">--</option>
        <option value="fruit">Fruit</option>
        <option value="vegetable">Vegetable</option>
        </select>
        <div id="myDiv"></div>
    </body>

</html>

【讨论】：

注意：我意识到如果你改变主下拉菜单的值，你会得到一个带有相应值的新下拉菜单。但是，如果您再次更改主下拉菜单的值，则会出现另一个下拉菜单。为了解决这个问题，我添加了一个创建变量，并且在 displayAccordingly() 的开头，如果页面上已经有另一个下拉菜单，它将删除它。

【解决方案3】：

我想这个例子可能适合你的要求。这里我为 dynamicdropdown() 函数中的第二个选项设置了一些静态内容。没问题你可以通过 Option 对象来使用你的动态内容。对于例子

document.getElementById("subcategory").options[i] = new Option("key","value",false, false)

i 将是动态值的编号。

请参考演示部分DEMO of dynamic drop down menu values

<html>
    <head>
        <title>Create dyanamic dropdown list in javascript</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script language="javascript" type="text/javascript">
        function dynamicdropdown(listindex)
        {
            document.getElementById("subcategory").length = 0;
            switch (listindex)
            {
            case "fruits" :
                document.getElementById("subcategory").options[0]=new Option("Please select fruits","");
                document.getElementById("subcategory").options[1]=new Option("apple","apple");
                document.getElementById("subcategory").options[2]=new Option("banana","banana");
                document.getElementById("subcategory").options[3]=new Option("mangoes","mangoes");
                break;

            case "meats" :
                document.getElementById("subcategory").options[0]=new Option("Please select meats","");
                document.getElementById("subcategory").options[1]=new Option("pigs","pigs");
                document.getElementById("subcategory").options[2]=new Option("chicken","chicken");
                break;
            }
            return true;
        }
       </script>
    </head>
    <title>Dynamic Drop Down List</title>
    <body>
        <div class="category_div" id="category_div">Please specify food items:
        <select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
            <option value="">Select food items</option>
            <option value="Php">fruits</option>
            <option value="Javascript">meats</option>
        </select>
        </div>
        <div class="sub_category_div" id="sub_category_div">Please select foods:
        <script type="text/javascript" language="JavaScript">
            document.write('<select name="subcategory" id="subcategory"><option value="">Please select foods</option></select>')
        </script>
        <noscript>
            <select name="subcategory" id="subcategory" >
            <option value="">Please select foods</option>
            </select>
        </noscript>
        </div>
    </body>
</html>

更多详情另请参阅：Reference

【讨论】：

【解决方案4】：

我对你的问题有点困惑，但我只是为你写了两个示例示例DEMO1 和DEMO2

DEMO1 - javascript

window.onload = function() {
    document.getElementById("firstmenu").addEventListener('change',function(e) {ha(e,'firstmenu','secondmenu');}, false);
};

function ha(e,first,second){
    var firstOptions = document.getElementById(first).options;
    var secondOptions = document.getElementById(second).options;
    for(var i = 1, j = firstOptions.length; i < j; i++) {
        secondOptions[i].value = firstOptions[i].value;
        secondOptions[i].text = firstOptions[i].text;
    }
};

DEMO2 - javascript

window.onload = function() {
   document.getElementById("firstmenu").addEventListener('change',function(e) {ha(e,'secondmenu');}, false);
   document.getElementById("secondmenu").addEventListener('change',function(e) {ha(e,'firstmenu');}, false);
};
function ha (e,id){
   var index = e.target.selectedIndex;
   document.getElementById(id).selectedIndex = index;
};

DEMO1 和 DEMO2 的 HTML 相同：

<select id="firstmenu" name="City">
    <option value="--">--</option>
    <option value="NY">NY</option>
    <option value="LA">LA</option>
</select>
<br/>
<select id="secondmenu" name="zipCode">
    <option value="--">--</option>
    <option value="10001">10001(NY)</option>
    <option value="90001">90001(LA)</option>
</select>

希望对你有帮助！！

【讨论】：