Is there a way of adjusting the width of a

You can just add width: auto; and display: inline-block; to the div that will represent option item and it will resize automatically depending on it's content.


Use div as an width indicator so you can use it's width to resize your select box:

Set inline style:

<select class="select2" style="width:100%">

Comment .select2-container extra css:

/*.select2-container {
    width: 100% !important;

Add 'element' width on select2 init:

     width: 'element',
    minimumResultsForSearch: Infinity


If you are using bootstrap try this solution instead:

if you are willing to populate 2nd drop down based on first drop drop down select then you get help from here is the Demo

And here is the Tutorial

You should use an other theme like select2 to make this work. I upgraded your PLUNKER to show how this could work. Add allow-clear="true" into ui-select-match and set theme to theme="select2" to allow unselect an item.

<ui-select ng-model="country.selected" theme="select2" ng-disabled="disabled" style="width: 300px;">
      <ui-select-match allow-clear="true" placeholder="Select or search a country in the list...">{{$}}</ui-select-match>
      <ui-select-choices repeat="country in countries | filter: $">
            <span ng-bind-html=" | highlight: $"></span>
            <small ng-bind-html="country.code | highlight: $"></small>

You'll need to get the value of the selected option inside your handler, otherwise the variable won't be updated with the current value. Also, jQuery selectors are case sensitive, so you'll need to use #Reason not #reason.

This should work for you:

$('#Reason').on('change', function(){
    var selectedOption = $(this).find("option:selected").text();

Working Demo


Message :
Login to Add Your Comments .

Privacy Policy - Copyrights Notice - Feedback - Report Violation - RSS 2017 © All Rights Reserved .