Question

我正在制作一个系统，我遇到了以下疑问。我有两个是第一个选择车辆的品牌，第二个是选择车辆的型号。但我想选择车辆的品牌和车型的品牌来加载所选品牌的车型。

我拥有品牌和汽车模型的档案.json。例如格式json

"value":"ACURA","title":"Acura","models":[{"value":"CL_MODELS","title":"CL Models (4)"}]}


<select id="brand"></select>
<select id="models"></select>

所以我用标签填充第一个，这样第二个就会填充参考所选品牌的模型。

我选择的时候需要它，例如宝马，第二个选择仅涉及宝马的车型，而不是所有车型。

你是怎么做到的？

谢谢：）

Answer 1

我对如何获取数据知之甚少，但我相信你要问的是以一种使它可以被2个选择使用的方式来操纵它。看一下下面的例子：

var json = [{
    "value": "ACURA",
    "title": "Acura",
    "models": [{
      "value": "CL_MODELS",
      "title": "CL Models (4)"
    }]
  },
  {
    "value": "TOYOTA",
    "title": "Toyota",
    "models": [{
      "value": "TOYOTA_MODELS",
      "title": "Toyota Models (4)"
    }]
  }
];

$(document).ready(function() {
  $('#models').prop('disabled', true);
  $('#brand')
    .append($("<option></option>")
    .attr("value", "")
    .text(""));
  $.each(json, function(index) {
    $('#brand')
      .append($("<option></option>")
        .attr("value", json[index]["value"])
        .text(json[index]["title"]));
  });
  $('#brand').change(function() {
    process($(this).children(":selected").html());
  });
});

function process(brand) {
  $('#models').prop('disabled', false).find('option')
    .remove()
    .end();

  var models = $.map(json, function(entry) {
    if (entry["title"] === brand) {
      return entry["models"];
    }
  });
  $.each(models, function(index) {
    $('#models')
      .append($("<option></option>")
        .attr("value", models[index]["value"])
        .text(models[index]["title"]));
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="brand"></select>
<select id="models"></select>

Answer 2

//YOUR_JSON_DATA
//{"value":"ACURA","title":"Acura","models":[{"value":"CL_MODELS","title":"CL Models (4)"}]}


$.get( YOUR_JSON_DATA, function( data ) {
  // Did you want data to be an array of brands?
  for (let brand of data) {
    $("#brand").append(`<option>${ brand.value }</option>`)
    for (let models of brand.models) {
      $("#models").append(`<option> ${ models.value } </option>`)
    }
  }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="brand"></select>
<select id="models"></select>

以下是ya的示例代码段。我希望它提供一些清晰度。你想要JSON数据是一个数组吗？

如何使用json通过ajax填充两个<choices>

2 个答案: