使用Javascript的动态下拉列表

Question

我已经创建了一个动态下拉列表，用于填充产品和模型的产品。我的脚本没有运行来填充第二个和第三个下拉列表。我在下面的脚本中缺少什么？任何帮助表示赞赏。

＆＃13;

＆＃13;

var dataFirstSelect = {
  option:['Product1','Product2','Product3']
};

var dataSecondSelect={
  Product1:['Model 1','Model_2','Model_3','Model_4'],
  Product2:['Model 5','Model_6','Model_7','Model_8']
};

var dataThirdSelect={
  Model 1:['Make1-1-1','Make1-1-2','Make1-1-3','Make1-1-4'],
  Model 2:['Make1-2-1','Make1-2-2','Make1-2-3','Make1-2-4'],
  Model_3:['Make1-3-1','Make1-3-2','Make1-3-3','Make1-3-4'],
};
      
$('#company').on('change',function(){
  var a=$(this).val();
  if(a!==''){       
    for(var i=0;i<dataSecondSelect[a].length;i++) {
      $('#make').append($("<option></option>")
        .attr("value",dataSecondSelect[a][i])
        .text(dataSecondSelect[a][i]));   
	   }
  }
});

$('#make').on('change',function(){
  var b=$(this).val();
  if(b!==''){       
    for(var i=0;i<dataThirdSelect[b].length;i++){
      $('#model').append($("<option></option>")
        .attr("value",dataThirdSelect[b][i])
        .text(dataThirdSelect[b][i]));
    }
  }
});

function openDoc(url){
  window.open(url,"_blank","menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes");
}

$('#clickButton').on('click',function(){
  var data=new Object;
  $('select').each(function(){
    //console.log($(this));
    data[$(this)["0"].id]=$(this).val();  
  });
  openDoc(data.model);
});

＆＃13;

<select id="company" name="company"  class="form-control linked- 
dropdown" data-linked="make">
  <option value="">-- Select Product --</option>
  <option value="Product1">Product1</option>
  <option value="Product2">Product2</option>

<select id="make" name="make" class="form-control linked-
dropdown" data-linked="model">
  <option value="">Choose Make</option>         

<select id="model" name="model" class="form-control">
  <option value="">Choose Model</option>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是更新的代码段。您的代码有以下几个问题：

1）dataThirdSelect的两个属性中有一个空格，它们是模型1和模型2.您需要将它们用单引号或双引号括起来。

2）您的选择元素没有结束标记，必须在最后一个选项之后。

＆＃13;

＆＃13;

var dataFirstSelect = {
  option: ['Product1', 'Product2', 'Product3']
}
var dataSecondSelect = {
  Product1: ['Model 1', 'Model_2', 'Model_3', 'Model_4'],
  Product2: ['Model 5', 'Model_6', 'Model_7', 'Model_8']

}
var dataThirdSelect = {
  'Model 1': ['Make1-1-1', 'Make1-1-2', 'Make1-1-3', 'Make1-1-4'],
  'Model 2': ['Make1-2-1', 'Make1-2-2', 'Make1-2-3', 'Make1-2-4'],
  Model_3: ['Make1-3-1', 'Make1-3-2', 'Make1-3-3', 'Make1-3-4'],
}
$('#company').on('change', function() {
var a = $(this).val();
  if (a !== '') {
    for (var i = 0; i < dataSecondSelect[a].length; i++) {
      $('#make').append($("<option></option>")
        .attr("value", dataSecondSelect[a][i])
        .text(dataSecondSelect[a][i]));
    }
  }
});
$('#make').on('change', function() {
var b = $(this).val();
  if (b !== '') {
    for (var i = 0; i < dataThirdSelect[b].length; i++) {
      $('#model').append($("<option></option>")
        .attr("value", dataThirdSelect[b][i])
        .text(dataThirdSelect[b][i]));
    }
  }
});

function openDoc(url) {
  window.open(url, "_blank", "menubar=yes,location=yes,resizable=yes,scrollbars= yes, status = yes ");
}
$('#clickButton').on('click', function() {
  var data = new Object;
  $('select').each(function() {
    //console.log($(this));
    data[$(this)["0"].id] = $(this).val();
  });
  openDoc(data.model);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="company" name="company" class="form-control linked- 
       dropdown" data-linked="make">
      <option value="">-- Select Product --</option>
      <option value="Product1">Product1</option>
      <option value="Product2">Product2</option>
      </select>

<select id="make" name="make" class="form-control linked-
             dropdown" data-linked="model">
        <option value="">Choose Make</option>    
        </select>

<select id="model" name="model" class="form-control">
        <option value="">Choose Model</option>
        </select>

＆＃13;

＆＃13;

＆＃13;