jquery从json中选择选项设置值答案

【问题标题】：jquery select option set value from jsonjquery从json中选择选项设置值
【发布时间】：2016-09-05 19:51:45
【问题描述】：

我的 html 代码如下：

$.ajax({
  type: "POST",
  url: "hanca/hanca_crud.php",
  dataType: 'json',
  data: {
    id_hanca: id_hanca,
    type: "detail_hanca"
  }, //detail_hanca
  success: function(data) {

    var teks = "";
    $.each(data.detail, function(indeks, nilai) {
      //status hanca
      var tmp1 = nilai.status_detail_hanca;
      $("select.status_detail_hanca").val(tmp1);

      var no = nilai.no;
      var status_detail_hanca = "<select class='status_detail_hanca' name='status_detail_hanca[]' ><option value='0'>Proses</option><option value='1'>Return</option><option value='2'>Selesai</option></select>";
      teks += "<tr>" + no +
        "</td><td>" + status_detail_hanca +
        "</td></tr>";
    });
    $(".tbody_detail_hanca_checking").append(teks);
  }
});

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


<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Status Proses</th>
    </tr>
  </thead>
  <tbody class="tbody_detail_hanca_checking">
  </tbody>
</table>

这个输出json：

{
	"detail": [{
		"status_detail_hanca": "2",
		"no": 1
	}, {
		"status_detail_hanca": "0",
		"no": 2
	}]
}

我使用 ajax 通过 json 获取数据，我想创建一个 select option 并从 json 设置 value 数据。但是，它不起作用。如何解决？

允许代码的文本虚拟对象 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Morbi vel发酵马萨，quis viverra lectus。 Aliquam tristique feugiat volutpat。 Donec elementum sapien vel enim facilisis sollicitudin。整数 pellentesque volutpat enim

【问题讨论】：

选择元素在哪里>？
status_detail_hanca 动态添加
这是用 jquery 创建一个元素，像这样：` var status_detail_hanca = "";`
你想从 json 中设置什么值？
如果 json 返回 "status_detail_hanca": "2" 则选择 <option value='2'>Selesai</option>

标签： javascript jquery html json ajax

【解决方案1】：

$("select.status_detail_hanca").val(tmp1);

这将不起作用，因为您在编写相同的选项之前尝试设置选择选项 - $(".tbody_detail_hanca_checking").append(teks);

所以试试这个。

    $.ajax({
  type: "POST",
  url: "hanca/hanca_crud.php",
  dataType: 'json',
  data: {
   id_hanca: id_hanca,
   type: "detail_hanca"
  }, //detail_hanca
  success: function(data) {

    var teks = "";
    $.each(data.detail, function(indeks, nilai) {
      //status hanca
      var tmp1 = nilai.status_detail_hanca;
      $("select.status_detail_hanca").val(tmp1);

      var no = nilai.no;
      var status_detail_hanca = "<select class='status_detail_hanca' name='status_detail_hanca[]' >\n\
        <option value='0'";
        if(tmp1 === '0') {
            status_detail_hanca += " selected ";
        }
      status_detail_hanca += ">Proses</option>\n\
        <option value='1'";
        if(tmp1 === '1') {
            status_detail_hanca += " selected ";
        }
      status_detail_hanca += ">Return</option>\n\
        <option value='2'";
        if(tmp1 === '2') {
            status_detail_hanca += " selected ";
        }                
      status_detail_hanca += ">Selesai</option>\n\
        </select>";
      teks += "<tr>" + no +
        "</td><td>" + status_detail_hanca +
        "</td></tr>";
    });
    $(".tbody_detail_hanca_checking").append(teks);
  }
});

【讨论】：