0

我用 jQuery 和 JavaScript 创建了一个动态下拉列表。我希望有人可以看看并让我知道这是否是处理此类任务的合适方法。我特别想知道这段代码是否可扩展，它会表现良好吗？接下来，是否建议在我下面的 JavaScript 中使用一个switch语句而不是几个语句？if如果是这样，为什么？我想存储它以便在我实现这样的解决方案时随时重用，但由于我是 JavaScript 新手，我还不完全相信我的工作。

JSFIDDLE：http: //jsfiddle.net/6vrpF/

HTML：

<select id='parent'>
  <option value='test'>test</option>
  <option value='sure'>sure</option>
  <option value='cool'>cool</option>
  <option value='best'>best</option>
</select>

<select id='child'>
</select>

JavaScript：

function newDropdown()
{
   var html = ""
   for(i=0; i<arguments.length; i++)
   {
     html += "<option value='"+arguments[i]+"'>"+arguments[i]+"</option>"
   }
   $("#child").append(html)
}

$("#parent").on("change",function(){
  $('#child').text("")
  var selection = $("#parent").val()
  if(selection == 'test') {newDropdown('a','b','c')}
  if(selection == 'sure') {newDropdown('d','e','f')}
  if(selection == 'cool') {newDropdown('g','h','i')}
  if(selection == 'best') {newDropdown('j','k','l')}
});
4

1 回答 1

2

更新了小提琴 http://jsfiddle.net/6vrpF/4/

var parentChild = {
    "test" :['a','b','c'],
    "sure" :['d','e','f'],
    "cool" :['g','h','i'],
    "best" :['j','k','l']
};

function newDropdown()
{
    var html = ""
    for(i=0; i<arguments.length; i++)
    {
        html += "<option value='"+arguments[i]+"'>"+arguments[i]+"</option>"
    }
    $("#child").append(html)
}

$("#parent").on("change",function(){
    $('#child').text("")
    var selection = $("#parent").val();
    newDropdown( parentChild[selection].join(",") );
});

您需要以上面提到/定义的 JSON 格式获取数据

编辑：这是更新的小提琴，它将一一提供选项 http://jsfiddle.net/6vrpF/6/

var parentChild = {
    "test" :['a','b','c'],
    "sure" :['d','e','f'],
    "cool" :['g','h','i'],
    "best" :['j','k','l']
};

function newDropdown()
{
    var array = arguments[0];
    var html = ""
    for(i=0; i<array.length; i++)
    {
        html += "<option value='"+array[i]+"'>"+array[i]+"</option>"
    }
    $("#child").append(html)
}

$("#parent").on("change",function(){
    $('#child').text("")
    var selection = $("#parent").val();
    newDropdown( parentChild[selection] );
});
于 2013-04-27T20:05:47.513 回答