codingdir logo sitemap sitemap |
Home
PHP
C#
C++
ANDROID
JAVA
JAVASCRIPT
PYTHON

Is there a way of adjusting the width of a
By : , Category : javascript

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.

http://jsfiddle.net/JKxTQ/1/

UPDATE 2:

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

http://jsfiddle.net/JKxTQ/6/

ReLated :

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:

$('.select2').select2({
     width: 'element',
    minimumResultsForSearch: Infinity
  });
});

Example: http://jsfiddle.net/chemark/z9sLqLbx/

If you are using bootstrap try this solution instead: http://xcellerant.net/2015/09/17/fixing-the-width-of-a-select-2-with-a-long-value-in-a-bootstrap-form-group-or-input-group/

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...">{{$select.selected.name}}</ui-select-match>
      <ui-select-choices repeat="country in countries | filter: $select.search">
            <span ng-bind-html="country.name | highlight: $select.search"></span>
            <small ng-bind-html="country.code | highlight: $select.search"></small>
      </ui-select-choices>
</ui-select>

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();
    alert(selectedOption);
});

Working Demo

Comments


Message :
Login to Add Your Comments .

How to disable registered OpenCL platforms on Windows?
Is Observable broken in Angular 2 Beta 3?
Cross-thread operation not valid when using Invoke
How to pass an IEnumerable or queryable list of properties from Controller to View
Finding numbers after a certain keyword using Python
Pocketsphinx recognizes random phrases in a silence
Passing non-thread-safe objects through thread-safe containers
React scroll nav
BizTalk WCF-BasicHttp Adapter does not allow Empty string for Service Certificate Props
Why property ''cause" of Exception is repeating forever?
Privacy Policy 2017 © codingdir.com All Rights Reserved .