Question

我有一个像这样的选择：

<select multiple="" data-live-search="true" class="selectpicker" name="properties[]" id="properties">
        <option class="prop-option" data-parent="10">Test</option>
        <option class="prop-option" data-parent="11" value="1">politico</option>
        <option class="prop-option" data-parent="0" value="2">cantante</option>
        <option class="prop-option" data-parent="0" value="3">show girl</option>
 </select>

现在我需要在data-parent等于0的现有选项之后添加新选项。我尝试使用append，之前和之后，但没有运气。

有没有简单的方法可以在jQuery的特定现有选项之后添加新选项？

$( document ).ready(function() {

  // instantiating the main properties
  loadProperties(0);

  $('#properties').on('change', function(){
    var parent_id = $("option:selected", this).val();
    loadProperties(prop_id);
  });

});

function loadProperties(parent_id) {
  var prop_select = $('#properties');
  $.get("json/" + parent_id + ".json",function(options,status){

    if(parent_id === 0) {
      $.each(options, function(val, text) {

        var option = $('<option data-parent="' + parent_id + '" class="prop-option"></option>').val(val).html(text);
        prop_select.append(option);

      });

    }else{

      $.each(options, function(val, text) {
        var option = $('<option data-parent="' + parent_id + '" class="prop-option multilevel"></option>').val(val).html(text);
       // HERE I HAVE TO APPEND THE NEW OPTIONS TO THE RIGHT LOCATION
      });

    }

    $('.selectpicker').selectpicker('refresh');
  });
}

非常感谢

Answer 1

你可以这样做：

$.each(options, function(val, text) {
    var option = $('<option data-parent="' + parent_id + '" class="prop-option multilevel"></option>').val(val).html(text);
    // HERE I HAVE TO APPEND THE NEW OPTIONS TO THE RIGHT LOCATION
    $("#properties option").last().after(option);
});

Answer 2

您可以two方式实现这一目标： -

    $.each(options, function(val, text) {
       var option = $("<option data-parent='" + parent_id + "' class='prop-option multilevel'></option>").val(val).html(text);
       $("#properties option:last").after(option);
    });

或

    $.each(options, function(val, text) {
       $("#properties option:last").after("<option data-parent='" + parent_id + "' class='prop-option multilevel' val='" +val + "'></option>").next().html(text);
    });

如何在jQuery中的特定选项后添加选项到选择？

2 个答案: