Modification de la taille (largeur) d'un élément sélectionné en html

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

De jQuery Mobile Documentation:

Rafraîchir un choix

Si vous manipulez un choix via JavaScript, vous devez appeler la méthode de rafraîchissement pour mettre à jour le style visuel. Voici un exemple:

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

Voici un exemple qui fonctionne: http://jsfiddle.net/x472U/

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

À partir de la documentation jqueryMobile:

Rafraîchir un choix

Si vous manipulez un choix via JavaScript, vous devez appeler la méthode de rafraîchissement pour mettre à jour le style visuel. Voici un exemple:

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

Donc, si vous changez la largeur, vous devez encore l'actualiser

Tout ce que vous avez à faire est d'envelopper votre menu de sélection:

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

Ensuite, vous pouvez manipuler votre taille de largeur sélectionnée à partir de javascript ou css:

CSS:

 #mySelect{ width: 150px; } 

JAVASCRIPT:

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

Umm ce que vous avez fait est correct, la largeur de l'élément sélectionné est contrôlée par la taille de l'option à l'intérieur ou la largeur CSS.

Exemple basé sur votre code (cela fonctionne):

http://jsfiddle.net/7Wuq2/