Changing the width of a <select> item in HTML

Question

I am new to HTML, and I'm trying to build a mobile app using phoneGap and jQuery plug-in. I am currently programing using eclipse, In my app I have a drop dwon menu (select) with a couple of items in it. I am trying to change the width of the select item, but it doesnt work. here you can see what have i done to solve this:

<label for="select-choice-1" class="select">Choose Expiry Date</label>
        <select id="date" name="select-choice-1" id="select-choice-1" style="width:150px">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
</select>

Solution 1

$('#date').css('width', 'new_Value');

From jQuery Mobile Documentation:

Refreshing a select

If you manipulate a select via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

Solution 2

Here's a sample that works: http://jsfiddle.net/x472U/

Solution 3

  $("#date").change(function() {
 $(this).css({'width':'78px'});
  });

From the jqueryMobile Documentation:

Refreshing a select

If you manipulate a select via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

So if you do change the width, you still need to refresh it

Solution 4

All you have to do is wrap your select menu:

<div id="mySelect">
   <select id="cities">
    ...
   </select>
</div>

Then you can manipulate your select width size from javascript or css:

CSS:

#mySelect{ width: 150px; }

JAVASCRIPT:

$("#mySelect").css({"width":"150px"});

View more solutions