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

I have this HTML structure :

我有这个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>

and I also have this javascript :

我也有这个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);
    });
});

I can get key and val perfectly from JSON data, but why I still get empty option in .tarif? why jquery failed to append tarif_items? thank you so much.

我可以从JSON数据中完美地获得key和val,但为什么我仍然在.tarif中获得空选项?为什么jquery无法附加tarif_items?非常感谢。

2 个解决方案

#1

It fails because you are trying to append an array instead of an HTML string.

它失败是因为您尝试追加数组而不是HTML字符串。

To fix this:

解决这个问题:

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

I also suggest you to add an id attribute to that select like

我还建议你为这个选择添加一个id属性

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

And change the code like this

并改变这样的代码

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

and finally, as a final improvement. I suggest you to do make a reset to avoid further issues:

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

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

This way you can also call the function multiple time and regenerate the select.

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

#2

The issue is this, which doesn't belong to the selector as that is in the Ajax's context instead you should do 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.
    });
});

#1