Auto-Größenänderung das SELECT-element gemäß der ausgewählten OPTION Breite

Habe ich dieses select element mit verschiedenen option. Normalerweise wird der select element bekommen würde, dessen Breite von der größten option element, aber ich will das select element, um die Standard - option Wert ist die Breite, die kürzer ist. Wenn der Benutzer wählt eine andere optiondie select element sollte die Größe selbst, also der ganze text ist immer sichtbar im element.

$(document).ready(function() {
    $('select').change(function(){
        $(this).width($('select option:selected').width());
    });
});

Problem:

  • Auf Chrom (Kanaren) es wird immer eine Breite zurückgegeben 0.
  • Auf Firefox die Breite zu bekommen ist, Hinzugefügt und nicht geändert werden, wenn ausgewählte eine kürzere option.
  • Safari: das Gleiche Ergebnis wie Chrome.

Demo @ JSFiddle

InformationsquelleAutor der Frage Th3Alchemist | 2013-11-20

  1. 3

    Versuchen Sie die folgenden einfachen JavaScript-und konvertieren es in jQuery 🙂

    <html><head><title>Auto size select</title>

<script>
var resized = false;

function resizeSelect(selected) {
  if (resized) return;
  var sel = document.getElementById('select');
  for (var i=0; i<sel.options.length; i++) {
    sel.options[i].title=sel.options[i].innerHTML;
    if (i!=sel.options.selectedIndex) sel.options[i].innerHTML='';
  }
  resized = true;
  sel.blur();
}

function restoreSelect() {
  if (!resized) return;
  var sel = document.getElementById('select');
  for (var i=0; i<sel.options.length; i++) {
    sel.options[i].innerHTML=sel.options[i].title;
  }  
  resized = false;
}
</script>

</head>
<body onload="resizeSelect(this.selectedItem)">
<select id="select" 
  onchange="resizeSelect(this.selectedItem)"
  onblur="resizeSelect(this.selectedItem)"
  onfocus="restoreSelect()">
<option>text text</option>
<option>text text text text text</option>
<option>text text text </option>
<option>text text text text </option>
<option>text</option>
<option>text text text text text text text text text</option>
<option>text text</option>
</select>
</body></html>

    Hier ein jsfiddle für Sie: https://jsfiddle.net/sm4dnwuf/1/

    Im Grunde, was es tut, ist, entfernen Sie vorübergehend nicht ausgewählte Elemente, wenn es nicht den Fokus hat (so dass es an Größe zu, nur die Größe der ausgewählten).

    InformationsquelleAutor der Antwort Divyesh

  2. 1

    Können Sie eine einfache Funktion:

    //Function that helps to get the select element width.
$.fn.getSelectWidth = function() {
  var width = Math.round($(this).wrap('<span></span>').width());
  $(this).unwrap();
  return width;
}

    Dann einfach verwenden Sie es auf Ihrem Formular wählen Sie element:

    $(this).getSelectWidth();

    InformationsquelleAutor der Antwort Jack

  3. 1

    Hier ist noch eine andere Ebene jQuery Lösung:

    $('#mySelect').change(function(){
    var $selectList = $(this);

    var $selectedOption = $selectList.children('[value="' + this.value + '"]')
        .attr('selected', true);
    var selectedIndex = $selectedOption.index();

    var $nonSelectedOptions = $selectList.children().not($selectedOption)
        .remove()
        .attr('selected', false);

    //Reset and calculate new fixed width having only selected option as a child
    $selectList.width('auto').width($selectList.width());

    //Add options back and put selected option in the right place on the list
    $selectedOption.remove();
    $selectList.append($nonSelectedOptions);
    if (selectedIndex >= $nonSelectedOptions.length) {
         $selectList.append($selectedOption);
    } else {
         $selectList.children().eq(selectedIndex).before($selectedOption);
    }
});

    InformationsquelleAutor der Antwort Antwerp Danish

  4. -3

    Können Sie versuchen, diese auch

    select option{width:0; }
select option:hover{width:auto;}

    InformationsquelleAutor der Antwort Dheeraj

Schreibe einen Kommentar