javascript: giá trị menu thả xuống động

tôi muốn tạo hai biểu mẫu thả xuống và nếu tôi chọn một mục trên menu đầu tiên, menu thứ hai sẽ hiển thị giá trị tương ứng. ví dụ: nếu tôi chọn "quả" trên menu đầu tiên, thì menu thứ hai sẽ hiển thị "quả táo", "chuối" và v.v. nó phải có giá trị trên chúng để tôi có thể chèn nó vào cơ sở dữ liệu.javascript: giá trị menu thả xuống động

html như sau:

<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; tôi đã suy nghĩ bằng cách sử dụng một cái gì đó như thế này nhưng tôi thiếu hiểu biết về javascript

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

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

ai đó có thể cho tôi một ví dụ mã? giúp đỡ được nhiều đánh giá cao, cảm ơn.

Nguồn

2013-12-10 fredriklind

Vâng,

cách sử dụng 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(); 


});

Nguồn

2013-12-10 03:55:00

Tôi đã sử dụng Javascript để tạo trình đơn thả xuống. Sau đó, nếu người dùng chọn trái cây trong menu thả xuống chính, tôi đã tạo các tùy chọn "trái cây" và nếu người dùng chọn rau trong trình đơn thả xuống chính, tôi đã tạo các tùy chọn "rau".

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

Mỗi lần giá trị của trình đơn thả xuống thay đổi, hiển thị chức năngMặc định() chạy. Nó tạo ra một menu thả xuống mới, và sau đó, nếu giá trị của menu thả xuống chính là trái cây, nó sẽ thêm các tùy chọn trái cây vào menu thả xuống mới được tạo ra, và nếu giá trị của menu thả xuống chính là rau, thì nó sẽ thêm các tùy chọn rau vào menu thả xuống mới được tạo.

Tôi hy vọng điều này sẽ hữu ích! :)

EDIT: Nếu bạn thay đổi giá trị của menu thả xuống hai lần, nó sẽ tạo ra 2 menu thả xuống. Tôi thêm một biến khác để khắc phục điều đó:

Nguồn

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

Lưu ý: Tôi nhận ra rằng nếu bạn thay đổi giá trị của thả xuống chính, bạn sẽ có được một danh sách lí mới với tương ứng giá trị. Tuy nhiên, nếu bạn thay đổi giá trị của danh sách thả xuống chính _again_, thì một menu thả xuống khác sẽ xuất hiện. Để khắc phục điều đó, tôi đã thêm một biến được tạo và ở đầu màn hìnhAccordingly(), nếu đã có một trình đơn thả xuống khác trên trang, nó sẽ xóa nó. – 416E64726577

tôi là một chút nhầm lẫn về vấn đề của bạn, nhưng tôi chỉ cần viết hai ví dụ mẫu cho bạn DEMO1 và 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 và DEMO 2 có cùng một 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>

Hy vọng điều này sẽ giúp bạn !!

Nguồn

2013-12-10 03:22:00

Tôi đoán ví dụ này có thể phù hợp với bạn yêu cầu .Here tôi đã thiết lập một số nội dung tĩnh cho tùy chọn thứ hai trong dynamicdropdown() function.No vấn đề bạn có thể làm điều đó với nội dung động của bạn bằng cách Tùy chọn dụ object.For

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

i sẽ bạn số cho giá trị động.

Vui lòng tham khảo phần giới thiệu 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>

Cũng tham khảo để biết thêm chi tiết: Reference

Nguồn

2015-03-30 10:30:52 Jyotiranjan

javascript: giá trị menu thả xuống động

Trả lời

Các vấn đề liên quan