select box append option не работает с использованием jquery

Question

У меня есть окно выбора с возможностью поиска, когда я добавляю новый элемент, значение должно быть добавлено в поле выбора и выбрано тоже.

HTML

<td rowspan="3"><label>Value(s):</label> 
    <select id="selectpa_color" name="attribute_terms" tabindex="-1" class="chosen-select" multiple="" style="width: 350px; display: none;"> 
    <option value="28">Red</option> 
    <option value="29">Blue</option> 
    <option value="31">Greens</option> 
    <option value="34">light</option> 
    <option value="41">light1</option> 
    <option value="62">new color</option> 
    </select> 
    <div class="chosen-container chosen-container-multi" title="" id="selectpa_color_chosen" style=""> 
    <ul class="chosen-choices"> 
     <li class="search-field"> 
     <input type="text" style="width:25px;" autocomplete="off" class="default" value="Select Some Options" tabindex="8"> 
     </li> 
    </ul> 
    <div class="chosen-drop"> 
     <ul class="chosen-results"> 
     </ul> 
    </div> 
    </div> 
    <!--<a href="javascript:void(0);" class="select_all_attributes" id="select_all_slug-color" onclick="selectAll(select_box-color,true)">Select All</a> 
             <a href="javascript:void(0);" class="select_no" id="select_no_slug-color">Select None</a>--> 
    <input type="button" class="prompt_button" value="Add new" id="pa_color|5"> 
</td> 

Jquery:

jQuery(".prompt_button").click(function(e){  
     var taxonomy = jQuery(this).attr('id').split("|");  
     jPrompt('Enter a name for the new attribute term::', '', 'Prompt Dialog', function(r) { 
     if(r) 
     { 
      var formData = {category_name: r,category_parent:0,taxonomy:taxonomy[0],shop_id:taxonomy[1]}; 
      e.preventDefault(); 
      jQuery.ajax({ 
       type: 'post', 
       url: baseurl+'ajax_functions/add_new_attribute_term/', 
       data: formData, 
       beforeSend: function(){ 
       }, 
       success: function(response){ 
       alert(taxonomy[0]);alert(response); 
       jQuery('select#selectpa_'+taxonomy[0]).append(response); 

       } 
      }); 
     } 

    }); 

HTML Вид:

Если я добавить некоторое другое значение к другому идентификатору она добавит, но нет в выбранном коробка и ul li тоже ..

Answer 1

Это из-за вашего селектора, будучи построенным неправильно. Что вы попробуете выбрать #selectpa_pa_color вместо #selectpa_color.

Изменить

jQuery('select#selectpa_'+taxonomy[0]).append(response); 

в

jQuery('select#select'+taxonomy[0]).append(response).trigger('chosen:updated'); 

На стороне записки, вы не должны указывать тэгу, если вы используете идентификатор, вы можете просто сделать jQuery('#select'+taxonomy[0]), который является более эффективным.