Javascript jQuery无法将JSON数据附加为select选项

我有这个HTML结构：

<div class="row">
    <div class="col-sm-6 p-l-0">
      <div class="form-group form-group-default form-group-default-select2 required">
        <select disabled class="kurir">
        <option select="selected"></option>
        </select>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group form-group-default form-group-default-select2 required">
        <select disabled class="tarif">
        <option select="selected"></option>
        </select>
      </div>
    </div>
</div>

我还有一个javascript：

$(".kurir").change(function() {

    var json_url = "some url here";

    $.getJSON( json_url, function( data ) {
        var tarif_items = [];
        $.each( data, function( key, val ) {
            tarif_items.push( "<option value='" + key + "'>" + val + "</option>" );
        });

        $(this).parent().parent().next().find('.tarif').append(tarif_items);
    });
});

---

我可以从JSON数据中完美地获取key和val，但为什么我仍然在.tarif中获取空选项呢？为什么jquery无法附加tarif\u项？非常感谢。

它失败了，因为您试图附加数组而不是HTML字符串

要解决此问题，请执行以下操作：

var $this = $(this);

$.getJSON( json_url, function( data ) {
    var tarif_items = "";
    $.each( data, function( key, val ) {
        tarif_items += "<option value='" + key + "'>" + val + "</option>";
    });

    $this.parent().parent().next().find('.tarif').append(tarif_items);
});

然后像这样修改代码

// $this.parent().parent().next().find('.tarif').append(tarif_items);
$('#tarif').append(tarif_items);

最后，作为最后的改进。我建议您进行重置以避免进一步的问题：

HTML:

JS:

---

通过这种方式，您还可以多次调用函数并重新生成select。

它失败，因为您试图附加数组而不是HTML字符串

要解决此问题，请执行以下操作：

var $this = $(this);

$.getJSON( json_url, function( data ) {
    var tarif_items = "";
    $.each( data, function( key, val ) {
        tarif_items += "<option value='" + key + "'>" + val + "</option>";
    });

    $this.parent().parent().next().find('.tarif').append(tarif_items);
});

然后像这样修改代码

// $this.parent().parent().next().find('.tarif').append(tarif_items);
$('#tarif').append(tarif_items);

最后，作为最后的改进。我建议您进行重置以避免进一步的问题：

HTML:

JS:

通过这种方式，您还可以多次调用函数并重新生成select。

问题在于，它不属于选择器，因为它在Ajax的上下文中，您应该执行以下操作：

$(".kurir").change(function() {
    var $this = $(this); // <----+cache it here
    var json_url = "some url here";

    $.getJSON( json_url, function( data ) {
        var tarif_items = [];
        $.each( data, function( key, val ) {
            tarif_items.push( "<option value='" + key + "'>" + val + "</option>" );
        });


         $this.closest('.col-sm-6.p-l-0')
                  .next().find('.tarif')
                  .append(tarif_items[0]);
         // now use it here.
    });
});

问题在于，它不属于选择器，因为它在Ajax的上下文中，您应该这样做：

$(".kurir").change(function() {
    var $this = $(this); // <----+cache it here
    var json_url = "some url here";

    $.getJSON( json_url, function( data ) {
        var tarif_items = [];
        $.each( data, function( key, val ) {
            tarif_items.push( "<option value='" + key + "'>" + val + "</option>" );
        });


         $this.closest('.col-sm-6.p-l-0')
                  .next().find('.tarif')
                  .append(tarif_items[0]);
         // now use it here.
    });
});

---

您的意思是有一个空选项，而jQuery中的选项也可用，还是jQuery中的选项都不可用？是否有任何内容打印到错误控制台？您的意思是有一个空选项，而jQuery中的选项也可用，还是jQuery中的选项都不可用？是否有任何内容打印到错误控制台？