Comment développer la largeur de l'option 'select' après que l'utilisateur souhaite sélectionner une option

StackOverflow https://stackoverflow.com/questions/294040

Question

C'est peut-être une question facile, peut-être pas. J'ai une boîte de sélection où je hardcode avec la largeur. Dis 120px. 

<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

Je veux pouvoir afficher la deuxième option afin que l'utilisateur puisse voir la totalité du texte.

Comme tout le reste. Cela fonctionne bien dans Firefox, mais ne fonctionne pas avec Internet Explorer6.

Était-ce utile?

La solution

Si vous avez l'option préexistante dans un <select> corrigé, et que vous ne souhaitez pas modifier la largeur par programmation, vous risquez de ne pas avoir de chance, sauf si vous avez un peu de créativité.

  • Vous pouvez essayer de définir l'attribut title pour chaque option. Ceci est du code HTML non standard (si vous vous souciez de cette infraction mineure ici), mais IE (et Firefox également) affichera l'intégralité du texte dans un menu contextuel lorsque la souris survole la souris.
  • Vous pouvez utiliser JavaScript pour afficher le texte dans une DIV positionnée lorsque l'utilisateur sélectionne quelque chose. IMHO c'est la façon pas si belle de le faire, car il faut que JavaScript soit activé, et cela ne fonctionne que après que quelque chose a été sélectionné - avant cela est un changement de valeur, aucun événement ne se déclenche pour la zone de sélection.
  • Vous n'utilisez pas de boîte de sélection, mais implémente ses fonctionnalités à l'aide d'autres balises et CSS . Ce n’est pas mon préféré, mais je voulais le mentionner.

Si vous ajoutez une option longue ultérieurement via JavaScript, regardez ici: Comment mettre à jour HTML & # 8220; sélectionnez & # 8221; encadrer dynamiquement dans IE

Autres conseils

J'ai résolu mon problème avec le code suivant: 

<div style="width: 180px; overflow: hidden;">
   <select style="width: auto;" name="abc" id="10">
     <option value="-1">AAAAAAAAAAA</option>
     <option value="123">123</option>
   </select>
</div>

J'espère que ça aide!

Salut, Cychan

Ceci imite la plupart des comportements que vous recherchez:       

  <!--

     I found this works fairly well.

  -->

  <!-- On page load, be sure that something else has focus. -->
  <body onload="document.getElementById('name').focus();">
  <input id=name type=text>

  <!-- This div is for demonstration only.  The parent container may be anything -->
  <div style="height:50; width:100px; border:1px solid red;">

  <!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
  <select
   style="width:96px; position:absolute; z-index:+1;"
   onactivate="this.style.width='auto';"
   onchange="this.blur();"
   onblur="this.style.width='96px';">
  <!-- "activate" happens before all else and "width='auto'" expands per content -->
  <!-- Both making a selection and moving to another control should return static width -->

  <option>abc</option>
  <option>abcdefghij</option>
  <option>abcdefghijklmnop</option>
  <option>abcdefghijklmnopqrstuvwxyz</option>

  </select>

  </div>

  </body>

  </html>

Ceci remplacera certains comportements de pression de touche.

Placez-le dans un div et lui donner un identifiant 

<div id=myForm>

créez ensuite un fichier css très simple à utiliser. 

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

C'est tout ce dont vous avez besoin.

Je l'ai corrigé dans ma page d'amorçage en définissant les valeurs min-width et max-width sur la même valeur dans la sélection, puis en définissant select: focus sur auto. 

select {
  min-width: 120px;
  max-width: 120px;
}
select:focus {
  width: auto;
}
<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

Une solution simple que j'ai utilisée pour un site existant dans IE (à l'aide de jQuery, mais que je peux renvoyer avec du code eventListener si vous ne connaissez pas très bien JS) est la suivante: 

if (jQuery.browser.msie) {
  jQuery('#mySelect').focus(function() {
    jQuery(this).width('auto');
  }).bind('blur change', function() {
    jQuery(this).width('100%');
  });
};

Bien sûr, utilisez une variable (var cWidth = jQuery('#mySelect').width();) pour stocker la largeur précédente, mais c’est tout ce qui était nécessaire pour que la nôtre fonctionne correctement.

Échantillon 

function PopulateDropdown() {
    $.ajax({
        type: "POST",
        url: "../CommonWebService.asmx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $("select[id^='MyDropDown']").empty();
            $.each(msg.d, function () {
                $("select[id^='MyDropDownSelect']").append($("<option></option>").val(this['IdIndexDataType']).html(this['DataTypeName']));
            }); 
            $("select[id^='MyDropDown']").css("width", "auto");  
        },
        error: function (e1) {
            alert("Error - " + e1.toString());
        }
    });
}

Le code ci-dessous résoudra votre problème de largeur de la liste déroulante en ajoutant ce code après l'insertion de Données dans la liste déroulante. 

$("select[id^='MyDropDown']").css("width", "auto");

D'accord, cette option est assez féroce mais devrait fonctionner. 

$(document).ready( function() {
$('#select').change( function() {
    $('#hiddenDiv').html( $('#select').val() );
    $('#select').width( $('#hiddenDiv').width() );
 }
 }

Ce qui nécessiterait bien sûr un div caché. 

<div id="hiddenDiv" style="visibility:hidden"></div>

ohh et vous aurez besoin de jQuery

J'ai amélioré la solution de cychan, pour être comme ça: 

<html>
<head>

<style>
    .wrapper{
        display: inline;
        float: left; 
        width: 180px; 
        overflow: hidden; 
    }
    .selectArrow{
        display: inline;
        float: left;
        width: 17px;
        height: 20px;
        border:1px solid #7f9db9;
        border-left: none;
        background: url('selectArrow.png') no-repeat 1px 1px;
    }
    .selectArrow-mousedown{background: url('selectArrow-mousedown.png') no-repeat 1px 1px;}
    .selectArrow-mouseover{background: url('selectArrow-mouseover.png') no-repeat 1px 1px;}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>

<script language="javascript">
    $(document).ready(function(){
        $('#w1').wrap("<div class='wrapper'></div>");
        $('.wrapper').after("<div class='selectArrow'/>");
        $('.wrapper').find('select').mousedown(function(){
            $(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
            $(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
            $(this).parent().next().addClass('selectArrow-mouseover');
        }, function(){
            $(this).parent().next().removeClass('selectArrow-mouseover');
        });

        $('.selectArrow').click(function(){
            $(this).prev().find('select').focus();
        });

        $('.selectArrow').mousedown(function(){
            $(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
            $(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
            $(this).addClass('selectArrow-mouseover');
        }, function(){
            $(this).removeClass('selectArrow-mouseover');
        });
    });

</script>
</head>
<body>
    <select id="w1">
       <option value="0">AnyAnyAnyAnyAnyAnyAny</option>
       <option value="1">AnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAny</option>
    </select>

</body>
</html>

Les PNG utilisés dans les classes CSS sont téléchargés ici ...

Et vous avez encore besoin de JQuery .....

vous pouvez essayer de résoudre en utilisant css seulement. en ajoutant une classe pour sélectionner 

select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}

pour plus de références, Style de zone de liste dans un élément particulier (option) HTML

Zone de liste à sélection multiple

Très vieille question mais voici la solution. Ici, vous avez un extrait qui utilise jquery. Il utilise un auxiliaire temporaire select dans lequel l’option sélectionnée de la sélection principale est copiée, de manière à ce que l’on puisse évaluer la largeur réelle que devrait <<> la principale. 

$('select').change(function(){
  var text = $(this).find('option:selected').text()
  var $aux = $('<select/>').append($('<option/>').text(text))
  $(this).after($aux)
  $(this).width($aux.width())
  $aux.remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top