CODEWITHSUNDEEP
javascriptphpjqueryjquery-ui-multiselect
anjana
anjana

Reputation: 65

jquery multiple select list update failed

In my php project I have a multiple select dropdown and I'm using jquery.multiple.select.js.

My view part is

<div class="form-outer box">
  <div class="span12 ">
    <label>Partner</label>
    <select class="span9 check_select " name="partner[]" id="partner" multiple="multiple" >
      <!--<option value="-1">Select</option>-->
      <?php foreach ($member as $memberpart) : ?>
         <option  value="<?php echo $memberpart->members_id; ?>">
           <?php echo $memberpart->members_first_name; ?>
         </option>
      <?php endforeach; ?>                                
    </select>
    <a href="#paradd" class="btn" role="button" onclick="clear_message()" data-toggle="modal">
      <i class="icon-plus pull-right" style="margin-top:5px;"></i> 
    </a>
  </div>
</div>

Here I have a PLUS button (<a> tag) which opens a modal to add new partner. Now I want to update the multiple select dropdown when a new partner is added using the modal and I call a function when modal is closed as follows,

function bulid_select_box(select_box,path,doselect){ 
    var base_url  = $("meta[name=baseurl]").attr("content");
    $.ajax({
        url: base_url + path,
        success: function(data) {
            var json = jQuery.parseJSON(data);
            $(select_box).find('option').remove();
            $(select_box).append('<option value="-1">Select</option>');   
            var setselect = '';
            if(doselect){
                setselect = 'selected';
            }
            for(var i=0; i < json.length; i++){                                        
                if((json.length -1)== i){
                    $(select_box).append('<option ' + setselect  + ' value="' + json[i].value  + '">' + json[i].option  + '</option>'); 
                }else{
                    $(select_box).append('<option value="' + json[i].value  + '">' + json[i].option  + '</option>');              
                }
            }                
            $(select_box).trigger("chosen:updated");               
            $(select_box).data('chosen').activate_action();                 
            bulid_select_trigger(select_box);               
        }            
    }); 
}

When using this the new value does not get inserted in the list, but when I am inspecting the values shows in the <select> tag its style is display="none".

The actual list shows in a <div> with class=ms-drop with <li> tags.

I think the list is not updated when am using

  $(select_box).trigger("chosen:updated");

What am to do to update the list?

Upvotes: 0

Views: 708

Answers (1)

Ahmed Khan
Ahmed Khan

Reputation: 516

If you are using this library the way to refresh the list is

$select.append($opt).multipleSelect("refresh");

Upvotes: 1

Related Questions