Search code examples
jqueryjquery-chosen

Chosen select - Inject dynamic option as first option to choose


I am using chosen select plugin for select rendering. Now, i want to add new option into select after it renders. Tried below codes.. It renders as the last option. But, i need this option to render first. Is there anyway we can make this possible?

$('#Country').append( new Option('USA',2) );
$('#Country').trigger("chosen:updated");

Solution

  • Please try this example it's worked for me.

    $('#second').prepend( new Option('USA',2) );
    $(".chosen-select").chosen();
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/normalize.css">
    
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    
          <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
          <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
          <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <select id="second" data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
             <option value="" disabled="">Select country</option> 
              <option value="United Kingdom">United Kingdom</option> 
              <option value="Afghanistan">Afghanistan</option> 
              <option value="Albania">Albania</option> 
              <option value="Algeria">Algeria</option> 
              <option value="American Samoa">American Samoa</option> 
              <option value="Andorra">Andorra</option> 
              <option value="Angola">Angola</option> 
              <option value="Anguilla">Anguilla</option> 
            </select>