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

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> 

现在我需要之前刚刚与数据父等于0 我试着去解决它采用追加已有的选项后添加新的选项，之后但没有运气。

是否有任何简单的方法来追加新的选项，只是在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); 
    }); 

OR

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