javascript：動態下拉菜單值

我想創建兩個下拉表單，如果我在第一個菜單上選擇一個項目，第二個菜單將顯示相應的值。例如：如果我在第一個菜單上選擇「水果」，則第二個菜單將顯示「蘋果」，「香蕉」等。它必須有它們的值，所以我可以將它插入到數據庫中。javascript：動態下拉菜單值

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>

可能有人給我一個代碼示例？非常感謝幫助，謝謝。

來源

2013-12-10 fredriklind

那麼，

如何使用jQuery？

http://jsfiddle.net/W4m9S/1/

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(); 


});

來源

2013-12-10 03:55:00

我用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個下拉菜單。我添加了另一個變量來解決這個問題：

來源

2013-12-10 02:35:07 416E64726577

注：我意識到，如果你更改主下拉的價值，你會得到一個新的下拉菜單與相應的值。但是，如果您更改主下拉列表的值_again_，則會出現另一個下拉列表。爲了解決這個問題，我添加了一個創建的變量，並在displayAccordingly（）開頭，如果頁面上已經有另一個下拉菜單，它將刪除它。 – 416E64726577

我有點困惑你的問題，但我只是寫了兩個樣品示例爲您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和DEMO 2有相同的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>

希望這會幫助你！

來源

2013-12-10 03:22:00

我想這個例子可能適合你的需求。在這裏我已經設置在dynamicdropdown對於第二種選擇一些靜態內容（）function.No問題，你可以通過選項讓與您的動態內容 object.For例如

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

我將是你的動態值數。

請參閱演示部分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

來源

2015-03-30 10:30:52 Jyotiranjan

javascript：動態下拉菜單值

回答

相關問題