Come espandere la larghezza dell'opzione "seleziona" dopo che l'utente desidera selezionare un'opzione

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

Domanda

Forse questa è una domanda facile, forse no.Ho una casella di selezione in cui ho codificato con larghezza.Diciamo 120px.

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

Voglio essere in grado di mostrare la seconda opzione in modo che l'utente possa vedere l'intera lunghezza del testo.

Come tutto il resto.Funziona bene in Firefox, ma non funziona con Internet Explorer6.

È stato utile?

Soluzione

Se hai l'opzione preesistente in un fixed-with <select> e non vuoi cambiare la larghezza a livello di codice, potresti essere sfortunato a meno che non diventi un po 'creativo.

  • Puoi provare a impostare l'attributo title su ciascuna opzione. Questo è HTML non standard (se ti interessa questa piccola infrazione qui), ma IE (e anche Firefox) mostrerà l'intero testo in un popup del mouse al passaggio del mouse.
  • È possibile utilizzare JavaScript per mostrare il testo in alcuni DIV posizionati quando l'utente seleziona qualcosa. IMHO questo è il modo non così bello di farlo, perché richiede JavaScript per funzionare, e funziona solo dopo qualcosa è stato selezionato - prima che lì è una modifica del valore che nessun evento genera per la casella di selezione.
  • Non si utilizza affatto una casella di selezione, ma implementa la sua funzionalità usando altri markup e CSS . Non è il mio preferito, ma volevo menzionarlo.

Se in seguito aggiungi una lunga opzione tramite JavaScript, guarda qui: Come aggiornare HTML & # 8220; selezionare & # 8221; box dinamicamente in IE

Altri suggerimenti

Ho risolto il mio problema con il seguente codice: 

<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>

Spero che sia d'aiuto!

Saluti, Cychan

Questo imita la maggior parte del comportamento che stai cercando:       

  <!--

     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>

Questo sovrascriverà alcuni dei comportamenti di pressione dei tasti.

Posizionalo in un div e dagli un id 

<div id=myForm>

quindi crea un css davvero molto semplice da abbinare. 

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

Questo è tutto ciò di cui hai bisogno.

L'ho corretto nella mia pagina bootstrap impostando la larghezza minima e la larghezza massima sullo stesso valore nella selezione e quindi impostando la selezione: focus su 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>

Una semplice soluzione che ho usato per un sito esistente in IE (usando jQuery, ma posso postare indietro con eventListener codice se davvero non conosci JS così bene) è la seguente: 

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

Naturalmente, usa una variabile (var cWidth = jQuery('#mySelect').width();) per memorizzare la larghezza precedente, ma questo è tutto ciò che era necessario per far funzionare la nostra come ti aspetteresti.

Esempio 

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

Il codice seguente risolverà il problema della larghezza dell'elenco a discesa aggiungendo questo codice dopo l'inserimento dei dati nell'elenco a discesa. 

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

Ok, questa opzione è piuttosto hacker ma dovrebbe funzionare.

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

Il che ovviamente richiederebbe un div nascosto.

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

ohh e avrai bisogno di jQuery

Ho migliorato la soluzione del cychan, per essere così: 

<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>

I file PNG utilizzati nelle classi css sono caricati qui ...

E hai ancora bisogno di JQuery .....

puoi provare a risolvere solo usando css. aggiungendo classe per selezionare 

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

per ulteriori riferimenti Stile casella elenco in un elemento particolare (opzione) HTML

Casella di riepilogo Multi Select

Domanda molto vecchia ma ecco la soluzione. Qui hai uno snippet funzionante usando jquery. Si avvale di un ausiliario temporaneo select in cui viene copiata l'opzione selezionata dalla selezione principale, in modo tale da poter valutare la larghezza reale che dovrebbe avere il <=> 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>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top