Définir la largeur de l'élément dropdown en HTML sélectionner les options de dropdown

je trouve que la meilleure façon de manipuler les boîtes de dropdown longues est de le mettre à l'intérieur d'un conteneur div de largeur fixe et utiliser la largeur:auto sur l'étiquette de sélection. La plupart des navigateurs contiennent le dropdown dans le div, mais lorsque vous cliquez dessus, il s'agrandit pour afficher la pleine valeur de l'option. Il ne fonctionne pas avec IE explorer, mais il y a une correction (comme est toujours nécessaire avec IE). Votre code ressemblerait à quelque chose comme ce.

HTML

<div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div>

CSS

div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto;
}

HTML:

<select class="shortenedSelect">
    <option value="0" disabled>Please select an item</option>
    <option value="1">Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</option>
</select>

CSS:

.shortenedSelect {
    max-width: 350px;
}

Javascript:

// Shorten select option text if it stretches beyond max-width of select element
$.each($('.shortenedSelect option'), function(key, optionElement) {
    var curText = $(optionElement).text();
    $(this).attr('title', curText);

    // Tip: parseInt('350px', 10) removes the 'px' by forcing parseInt to use a base ten numbering system.
    var lengthToShortenTo = Math.round(parseInt($(this).parent('select').css('max-width'), 10) / 7.3);

    if (curText.length > lengthToShortenTo) {
        $(this).text('... ' + curText.substring((curText.length - lengthToShortenTo), curText.length));
    }
});

// Show full name in tooltip after choosing an option
$('.shortenedSelect').change(function() {
    $(this).attr('title', ($(this).find('option:eq('+$(this).get(0).selectedIndex +')').attr('title')));
});

Fonctionne parfaitement. J'ai eu le même problème moi-même. Regardez ce JSFiddle http://jsfiddle.net/jNWS6/426/

Sur le côté serveur:

1. définir une longueur max de la chaîne
2. Clip chaîne
3. (optionnel) ajouter les ellipses horizontales

solution Alternative: l'élément select est dans votre cas (en devinant seulement) un contrôle de forme à choix unique et vous pourriez utiliser un groupe de boutons radio à la place. Ceux-ci, vous pourriez alors style avec un meilleur contrôle. Si vous avez sélectionnez[@multiples] on pourrait faire la même chose avec un groupe de cases à cocher au lieu de cela comme ils peuvent tous les deux être considérés comme un contrôle de forme à choix multiples.

Petit Et Meilleur

#test{
width: 202px;
}
<select id="test" size="1" name="mrraja">

u peut simplement utiliser l'attribut" width " de "style" pour changer la longueur de la boîte de dropdown

<select class="my_dropdown" id="my_dropdown" style="width:APPROPRIATE WIDTH IN PIXLES">
<option value="1">LONG OPTION</option>
<option value="2">short</option>
</select>

par exemple

style="width:200px"

Petit Et Meilleur

var i = 0;
$("#container > option").each(function(){ 
    if($(this).val().length > i) {
        i = $(this).val().length;

        console.log(i);
        console.log($(this).val());
    }
});