javascript：动态下拉菜单值_Javascript_Html

javascript：动态下拉菜单值

javascript html

javascript：动态下拉菜单值,javascript,html,Javascript,Html,我想创建两个下拉表单，如果我在第一个菜单上选择一个项目，第二个菜单将显示相应的值。例如：如果我在第一个菜单上选择“水果”，那么第二个菜单将显示“苹果”、“香蕉”等。它上面必须有值，这样我才能将它插入数据库 html格式如下： <select id="firstmenu" name="fruit"> <option value="apple">apple</option> <option value="banana">banana</optio

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

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>

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;
    }
};

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;
};


var a=document.forms[“myform”][“fruit”].value；
var b=document.forms[“myform”][“vegeture”].value；
如果（a=“水果”）
{
...
}

有人能给我一个代码示例吗？非常感谢您的帮助。

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


函数（）{
//调用主菜单主下拉菜单
var mainMenu=document.getElementById（'mainMenu'）；
//创建新的下拉菜单
var whereToPut=document.getElementById（'myDiv'）；
var newDropdown=document.createElement（'select'）；
setAttribute（'id'，“newDropdownMenu”）；
whereToPut.appendChild（新建下拉菜单）；
如果（main menu.value==“fruit”）{//该人选择了水果
//添加一个名为“Apple”的选项
var optionApple=document.createElement（“选项”）；
optionApple.text=“苹果”；
添加（optionApple，newDropdown.options[null]）；
//添加一个名为“香蕉”的选项
var optionBanana=document.createElement（“选项”）；
optionBanana.text=“香蕉”；
添加（optionBanana，newDropdown.options[null]）；
}否则，如果（main menu.value==“蔬菜”）{//该用户选择了vegetabes
//添加一个名为“菠菜”的选项
var optionSpinach=document.createElement（“选项”）；
选项pinach.text=“菠菜”；
添加（optionSpinach，newDropdown.options[null]）；
//添加一个名为“西葫芦”的选项
var optionZucchini=document.createElement（“选项”）；
optionZucchini.text=“Zucchini”；
添加（optionZucchini，newDropdown.options[null]）；
}
}
--
果
蔬菜

每次下拉菜单的值更改时，函数display（）都会相应地运行。它创建一个新的下拉菜单，然后，如果主下拉菜单的值是水果，它会将水果选项添加到新创建的下拉菜单中，如果主下拉菜单的值是蔬菜，它会将蔬菜选项添加到新创建的下拉菜单中

我希望这有帮助！：）

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

<!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>


var=0；
函数（）{
如果（已创建==1）{
removeDrop（）；
}
//调用主菜单主下拉菜单
var mainMenu=document.getElementById（'mainMenu'）；
//创建新的下拉菜单
var whereToPut=document.getElementById（'myDiv'）；
var newDropdown=document.createElement（'select'）；
setAttribute（'id'，“newDropdownMenu”）；
whereToPut.appendChild（新建下拉菜单）；
如果（main menu.value==“fruit”）{//该人选择了水果
//添加一个名为“Apple”的选项
var optionApple=document.createElement（“选项”）；
optionApple.text=“苹果”；
添加（optionApple，newDropdown.options[null]）；
//添加一个名为“香蕉”的选项
var optionBanana=document.createElement（“选项”）；
optionBanana.text=“香蕉”；
添加（optionBanana，newDropdown.options[null]）；
}否则，如果（main menu.value==“蔬菜”）{//该用户选择了vegetabes
//添加一个名为“菠菜”的选项
var optionSpinach=document.createElement（“选项”）；
选项pinach.text=“菠菜”；
添加（optionSpinach，newDropdown.options[null]）；
//添加一个名为“西葫芦”的选项
var optionZucchini=document.createElement（“选项”）；
optionZucchini.text=“Zucchini”；
添加（optionZucchini，newDropdown.options[null]）；
}
已创建=1
}
函数removeDrop（）{
var d=document.getElementById（'myDiv'）；
var oldmenu=document.getElementById（'newDropdownMenu'）；
d、 removeChild（旧菜单）；
}
--
果
蔬菜

我对您的问题感到有点困惑，但我刚刚为您和您写了两个示例

演示1-javascript

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

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

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;
    }
};

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>


--
纽约
洛杉矶


--
10001（纽约）
90001（洛杉矶）

希望这对你有帮助

嗯

使用jQuery怎么样

var项目=[{
名称：'--'，
值：“”，
分项：[]
},
{
名称：'水果'，
价值：'水果'，
分项：[{
名称：'苹果'，
价值：“苹果”
},
{
名称：'香蕉'，
价值：“香蕉”
}
]
},
{
名称：'蔬菜'，
价值：“蔬菜”，
分项：[{
名字：'胡萝卜'，
价值：“胡萝卜”
},
{
名称：'芹菜'，
价值：芹菜
}
]
}
];
$（函数（）{
var temp={}；
美元/个