我创建了一个动态下拉列表,以填充那里的品牌和型号的产品。我的脚本无法运行以填充第二个和第三个下拉列表。我在下面的脚本中缺少什么?任何帮助表示赞赏。



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

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

最佳答案

以下是更新的代码段。您的代码有以下两个问题:

1)dataThirdSelect的两个属性(模型1和模型2)中有一个空格。您需要将它们括在单引号或双引号中。

2)您的选择元素没有结束标签,必须在最后一个选项之后。



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

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

关于javascript - 使用Javascript的动态下拉列表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48133617/

10-12 12:51
查看更多