基於另一個下拉使用javascript填充下拉列表值

我在另一個應用程序的jsp頁面上這樣做。我需要基於另一個組合框填充組合框上的值。我已經看過幾篇文章解釋這個，但不能讓它爲我自己工作。這是我的嘗試。基於另一個下拉使用javascript填充下拉列表值

<script type="text/javascript"> 

    function customChangefunction(){ 
     var target = window.document.getElementsByName("resultCombo"); 
     var src = window.document.getElementById("sampleCombo"); 
     var strUser = src.options[src.selectedIndex].value; 
     alert(strUser); 
     var colours = new Array('Black', 'White', 'Blue'); 
      var shapes = new Array('Square', 'Circle', 'Triangle'); 
     var names = new Array('John', 'David', 'Sarah'); 

     switch (strUser) { 
        case 'one': 
         target.options.length = 0; 
         for (i = 0; i < colours.length; i++) { 
          createOption(target, colours[i], colours[i]); 
         } 
         break; 
        case 'two': 
         target.options.length = 0; 
        for (i = 0; i < shapes.length; i++) { 
         createOption(target, shapes[i], shapes[i]); 
         } 
         break; 
        case 'three': 
         target.options.length = 0; 
         for (i = 0; i < names.length; i++) { 
          createOption(target, names[i], names[i]); 
         } 
         break; 
         default: 
          target.options.length = 0; 
         break; 
      } 
    } 
    function createOption(ddl, text, value) { 
       var opt = document.createElement("OPTION"); 
       opt.value = value; 
       opt.text = text; 
       ddl.options.add(opt); 
       opt.appendChild(text); 
      document.getElementById(ddl).appendChild(opt); 
     }

上面的代碼是不是working.I要做到這一點，而無需使用jQuery的。我的實際需求是

if Combo1 is India then Combo2 should show Chennai,Delhi,Mumbai 
if Combo1 is USA then Combo2 should show New York,CA,etc..

我有一個問題。假設Combo2已經有一些值，這是否取代那些與這些值。我想這樣做

請在您將此問題標記爲重複或關閉它之前評論此問題。

來源

2014-10-16 Saranya Sharan

你可能會使用ajax來動態加載第二個下拉內容 – 2014-10-16 13:15:19

我想沒有必要。我需要類似於[this]的東西（http://jsfiddle.net/e6hzj8gx/4） – 2014-10-16 13:19:31

document.getElementById("food").onchange = function(Event){ 
    var contents = document.getElementById("contents"); 
    contents.innerHTML = ""; 
    for(var i in data[this.value]){ 
     var option = document.createElement("option"); 
     option.setAttribute('value',data[this.value][i]); 
     option.text = data[this.value][i]; 
     contents.appendChild(option); 
    } 
    var expect_data = Event.target.value == "Fruits" ? "Vegetables" : "Fruits"; 
    for(var i in data[expect_data]){ 
     var option = document.createElement("option"); 
     option.setAttribute('value',data[expect_data][i]); 
     option.text = data[expect_data][i]; 
     contents.appendChild(option); 
    } 
}

來源

2014-10-16 12:54:14 Sunny

你可以給一些描述嗎？ – 2014-10-16 12:56:47

var option = document.createElement（「option」）; option.setAttribute（'value'，data [expect_data] [i]）; option.text = data [expect_data] [i]; contents.appendChild（option）;這四行用於在選擇列表中創建選項。 – Sunny 2014-10-16 13:01:05

基於另一個下拉使用javascript填充下拉列表值

回答

相關問題