Question

我有这个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_items？非常感谢你。

Answer 1

它失败了，因为您尝试附加array而不是HTML string。

解决此问题：

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

我还建议您为该选择添加id属性，如

<select id="tarif" disabled class="tarif">
  <option select="selected"></option>
</select>

并像这样更改代码

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

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

HTML：

<select id="tarif" disabled class="tarif">
  <!-- no default option -->
</select>

JS：

$.getJSON( json_url, function( data ) {
    $('#tarif').html(''); // this resets the select content each time we receive the json
    var tarif_items = "<option select="selected"></option>"; // here it goes
    $.each( data, function( key, val ) {
        tarif_items += "<option value='" + key + "'>" + val + "</option>";
    });

    $('#tarif').append(tarif_items);
});

这样你也可以多次调用该函数并重新生成select。

Answer 2

问题是this，它不属于选择器，因为它位于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无法将JSON数据附加为select选项

2 个答案: