javascript：動的ドロップダウンメニューの値

私は2つのドロップダウンフォームを作成したいと思います。最初のメニューで項目を選択すると、2番目のメニューに対応する値が表示されます。たとえば：最初のメニューで「果物」を選択した場合、2番目のメニューに「リンゴ」、「バナナ」などが表示されます。私はデータベースにそれを挿入することができるので、それらの値を持っている必要があります。次のように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（）関数が実行されます。新しいドロップダウンメニューが作成され、メインドロップダウンメニューの値がフルーツの場合は、新しく作成されたドロップダウンメニューにフルーツオプションが追加され、メインドロップダウンメニューの値が野菜の場合は野菜オプションが追加されます新しく作成されたドロップダウンメニューに移動します。

こちらがお役に立てば幸いです。 :)

EDIT：ドロップダウンの値を2回変更すると、2つのドロップダウンメニューが作成されます。私はそれを修正するために別の変数を追加しました：

出典

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

注：私はあなたがメインのドロップダウンの値を変更した場合は、対応する新しいドロップダウンを取得することを実現値。しかし、メインドロップダウンボックス_gain_の値を変更すると、さらに別のドロップダウンが表示されます。これを修正するために、作成した変数を追加し、displayAccordingly（）の最初に、ページにもう1つのドロップダウンメニューがある場合、その変数を削除します。 – 416E64726577

私はあなたの問題について少し混乱していますが、私はちょうどあなたのための2つのサンプル例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に第二の選択肢のためのいくつかの静的なコンテンツを設定している.Hereあなたが要件（）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：動的ドロップダウンメニューの値

答えて

関連する問題