如何將選項添加到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); 
    });