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>

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>

• javascript
• jquery
• html
• cordova

• You want it to change size based on the selected option? – Makram Saleh Commented Jul 27, 2011 at 10:30

5 Answers 5

$('#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");

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

  $("#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

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"});

Umm what you have done is correct, select element width is either controlled by the size of the option inside it or the CSS width.

Example based off your code (that works):

http://jsfiddle.net/7Wuq2/