Automatische Größenanpassung des SELECT-Elements entsprechend der Breite der ausgewählten OPTION

ich habe das select Element mit unterschiedlichen option drin. Normalerweise die select Element würde seine Breite vom größten erhalten option Element, aber ich möchte das select Element, um den Standardwert zu haben option Breite des Werts, die kürzer ist. Wenn der Benutzer einen anderen auswählt optiondas select -Element sollte sich selbst in der Größe ändern, sodass der gesamte Text immer im Element sichtbar ist.

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

Problem:

• Auf Chrome (Canary) wird immer eine Breite von 0 zurückgegeben.
• Bei Firefox wird die Breite hinzugefügt und nicht angepasst, wenn eine kürzere Option ausgewählt wird.
• Safari: Gleiches Ergebnis wie Chrome.

Demo @ JSFiddle

Sie haben Recht, es gibt keine einfache oder integrierte Möglichkeit, die Größe einer bestimmten Auswahloption zu ermitteln. Hier ist ein JsFiddle das macht was du willst.

Es ist in Ordnung mit den neuesten Versionen von Chrome, Firefox, IE, Opera and Safari.

Ich habe eine versteckte Auswahl hinzugefügt #width_tmp_select um die Breite der sichtbaren Auswahl zu berechnen #resizing_select dass wir die Größe automatisch ändern wollen. Wir setzen die versteckte Auswahl so, dass sie eine einzige Option hat, deren Text der der aktuell ausgewählten Option der sichtbaren Auswahl ist. Dann verwenden wir die Breite der verborgenen Auswahl als Breite der sichtbaren Auswahl. Beachten Sie, dass die Verwendung einer versteckten Spanne anstelle einer versteckten Auswahl ziemlich gut funktioniert, aber die Breite wird ein wenig abweichen, wie von sami-al-subhi im Kommentar unten angegeben.

$(document).ready(function() {
  $('#resizing_select').change(function(){
    $("#width_tmp_option").html($('#resizing_select option:selected').text()); 
    $(this).width($("#width_tmp_select").width());  
  });
});

#resizing_select {
  width: 50px;
} 
 
#width_tmp_select{
  display : none;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<select id="resizing_select">
  <option>All</option>
  <option>Longer</option>
  <option>A very very long string...</option>
</select>

<select id="width_tmp_select">
  <option id="width_tmp_option"></option>
</select>

Hier ist ein Plugin, das ich gerade für diese Frage geschrieben habe und das dynamisch einen Mock erstellt und zerstört span damit es Ihr html nicht durcheinander bringt. Dies hilft bei der Trennung von Bedenken, lässt Sie diese Funktionalität delegieren und ermöglicht eine einfache Wiederverwendung über mehrere Elemente hinweg.

Fügen Sie dieses JS überall hinzu:

(function($, window){
  $(function() {
    let arrowWidth = 30;

    $.fn.resizeselect = function(settings) {  
      return this.each(function() { 

        $(this).change(function(){
          let $this = $(this);

          // get font-weight, font-size, and font-family
          let style = window.getComputedStyle(this)
          let { fontWeight, fontSize, fontFamily } = style

          // create test element
          let text = $this.find("option:selected").text();
          let $test = $("<span>").html(text).css({
            "font-size": fontSize, 
            "font-weight": fontWeight, 
            "font-family": fontFamily,
            "visibility": "hidden" // prevents FOUC
          });

          // add to body, get width, and get out
          $test.appendTo($this.parent());
          let width = $test.width();
          $test.remove();

          // set select width
          $this.width(width + arrowWidth);

          // run on start
        }).change();

      });
    };

    // run by default
    $("select.resizeselect").resizeselect();                       
  })
})(jQuery, window);

Sie können das Plugin auf zwei Arten initialisieren:

1. HTML – Klasse hinzufügen .resizeselect zu einem beliebigen ausgewählten Element:

   <select class="btn btn-select resizeselect">
      <option>All</option>
      <option>Longer</option>
      <option>A very very long string...</option>
    </select>
    

2. JavaScript – Anruf .resizeselect() für jedes jQuery-Objekt:

   $("select").resizeselect()

Demo ein jsFiddle und StackSnippets:

(function($, window){
  $(function() {
    let arrowWidth = 30;

    $.fn.resizeselect = function(settings) {  
      return this.each(function() { 

        $(this).change(function(){
          let $this = $(this);

          // get font-weight, font-size, and font-family
          let style = window.getComputedStyle(this)
          let { fontWeight, fontSize, fontFamily } = style

          // create test element
          let text = $this.find("option:selected").text();
          let $test = $("<span>").html(text).css({
            "font-size": fontSize, 
            "font-weight": fontWeight, 
            "font-family": fontFamily,
            "visibility": "hidden" // prevents FOUC
          });

          // add to body, get width, and get out
          $test.appendTo($this.parent());
          let width = $test.width();
          $test.remove();

          // set select width
          $this.width(width + arrowWidth);

          // run on start
        }).change();

      });
    };

    // run by default
    $("select.resizeselect").resizeselect();                       
  })
})(jQuery, window);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<select class="resizeselect">
  <option>All</option>
  <option>Longer</option>
  <option>A very very long string...</option>
</select>

Aktualisiert um Größenvorschläge von Garywoo & Eric Warnke aufzunehmen

Diese Arbeitslösung bedient sich hier eines temporären Hilfsmittels select in die die ausgewählte Option aus der Hauptauswahl geklont wird, sodass man die wahre Breite der Hauptauswahl beurteilen kann select sollte haben.

Das Schöne dabei ist, dass Sie diesen Code einfach hinzufügen und er auf alle Auswahlen anwendbar ist, also nicht erforderlich ist ids und zusätzliche Benennung.

$('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()
}).change()

<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>ABCDEFGHIJKL</option>
  <option>ABC</option>
</select>

Probieren Sie das folgende einfache JavaScript aus und konvertieren Sie 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 ist eine jsfiddle dafür: https://jsfiddle.net/sm4dnwuf/1/

Im Grunde genommen entfernt es vorübergehend nicht ausgewählte Elemente, wenn es nicht im Fokus ist (was dazu führt, dass es auf die Größe des ausgewählten Elements angepasst wird).

Hier ist ein modernerer Vanilla-JS-Ansatz, um dies zu lösen. Es ist mehr oder weniger das gleiche Prinzip wie in dieser Antwort, nur ohne jQuery.

1. Holen Sie sich das select-Element und hören Sie auf Änderungen daran.
2. Erstellen Sie ein neues Auswahlelement und eine neue Option und übergeben Sie den Text des aktuellen Elements selectedIndex zur Option.
3. Hinzufügen position: fixed und visibility: hidden Stile in das neue Auswahlelement. Dadurch wird sichergestellt, dass es Ihr Layout nicht beeinflusst, aber sein Begrenzungsrahmen weiterhin gemessen werden kann.
4. Hängen Sie die Option an die Auswahl an.
5. Hängen Sie das select an das ursprüngliche select-Element an.
6. Holen Sie sich die erforderlichen Abmessungen dieses neuen mit getBoundingClientRect().width
7. Legen Sie die Breite des Originals basierend auf den Abmessungen des neuen fest.
8. Entfernen Sie die neue.
9. Senden Sie ein Änderungsereignis, um diese Logik anfänglich auszulösen.

const select = document.querySelector('select')

select.addEventListener('change', (event) => {
  let tempSelect = document.createElement('select'),
      tempOption = document.createElement('option');

  tempOption.textContent = event.target.options[event.target.selectedIndex].text;
  tempSelect.style.cssText += `
      visibility: hidden;
      position: fixed;
      `;
  tempSelect.appendChild(tempOption);
  event.target.after(tempSelect);
  
  const tempSelectWidth = tempSelect.getBoundingClientRect().width;
  event.target.style.width = `${tempSelectWidth}px`;
  tempSelect.remove();
});

select.dispatchEvent(new Event('change'));

<select>
  <option>Short option</option>
  <option>Some longer option</option>
  <option>A very long option with a lot of text</option>
</select>

Sie können eine einfache Funktion verwenden:

// 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 verwenden Sie es einfach in Ihrem Formularauswahlelement:

$(this).getSelectWidth();

Hier ist noch eine weitere einfache 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);
    }
});