使用javascript根据另一个下拉列表填充下拉列表值

时间:2014-10-16 12:48:17

标签: javascript

我在另一个应用程序的jsp页面上执行此操作。我需要根据另一个组合框填充组合框上的值。我已经看到几个帖子解释了这一点,但不能让它为我自己工作。 这是我尝试过的。

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

上面的代码无效。我必须在不使用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已经有了一些值,这会取代具有这些值的那些。我想这样做

请在将此问题标记为重复或关闭之前对此发表评论。

1 个答案:

答案 0 :(得分:0)

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