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

Ich habe dieses select mit einer anderen option . Normalerweise würde das select Element seine Breite vom größten option , aber ich möchte, dass das select Element die Breite des Standard- option hat, die kürzer ist. Wenn der Benutzer eine andere option auswählt, sollte das select Element seine Größe ändern, damit 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 verkleinert, wenn eine kürzere Option ausgewählt wird.
  • Safari: Das gleiche Ergebnis wie Chrome.

Demo @ JSFiddle

    Sie haben Recht, es gibt keine einfache oder eingebaute Möglichkeit, die Größe einer bestimmten Auswahloption zu erhalten. Hier ist ein JsFiddle , der das macht, was Sie wollen.

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

    Ich habe eine versteckte Auswahl #width_tmp_select , um die Breite des sichtbaren #width_tmp_select zu berechnen. #resizing_select Sie #resizing_select , das wir automatisch #resizing_select möchten. Wir legen die versteckte Auswahl fest, um eine einzelne Option zu haben, deren Text der der aktuell ausgewählten Option der sichtbaren Auswahl entspricht. Dann verwenden wir die Breite der ausgeblendeten Auswahl als die Breite der sichtbaren Auswahl. Beachten Sie, dass die Verwendung eines versteckten Bereichs anstelle eines ausgeblendeten Bereichs ziemlich gut funktioniert, aber die Breite wird etwas kleiner sein, 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; } 
        

    Hier ist ein Plugin, das ich gerade für diese Frage geschrieben habe und das eine span dynamisch erstellt und zerstört, so dass es deinen HTML-Code nicht überflutet. Dies hilft, Probleme zu trennen, lässt Sie diese functionalität delegieren und ermöglicht eine einfache Wiederverwendung über mehrere Elemente hinweg.

    Fügen Sie dieses JS überall hinzu:

     (function($, window){ var arrowWidth = 30; $.fn.resizeselect = function(settings) { return this.each(function() { $(this).change(function(){ var $this = $(this); // create test element var text = $this.find("option:selected").text(); var $test = $("").html(text).css({ "font-size": $this.css("font-size"), // ensures same size text "visibility": "hidden" // prevents FOUC }); // add to parent, get width, and get out $test.appendTo($this.parent()); var 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 – Fügen Sie die class .resizeselect zu jedem ausgewählten Element hinzu:

        
    2. JavaScript – Rufen Sie .resizeselect() für ein beliebiges jQuery-Objekt auf:

       $("select"). resizeselect () 

    Hier ist eine Demo in jsFiddle

    Hier ist eine Demo in Stack Snippets:

     (function($, window){ var arrowWidth = 30; $.fn.resizeselect = function(settings) { return this.each(function() { $(this).change(function(){ var $this = $(this); // create test element var text = $this.find("option:selected").text(); var $test = $("").html(text).css({ "font-size": $this.css("font-size"), // ensures same size text "visibility": "hidden" // prevents FOUC }); // add to parent, get width, and get out $test.appendTo($this.parent()); var width = $test.width(); $test.remove(); // set select width $this.width(width + arrowWidth); // run on start }).change(); }); }; // run by default $("select.resizeselect").resizeselect(); })(jQuery, window); 
       

    Probieren Sie das folgende einfache JavaScript aus und konvertieren Sie es in jQuery 🙂

     Auto size select      

    Hier ist ein Beispiel dafür: https://jsfiddle.net/sm4dnwuf/1/

    Im Grunde genommen werden nicht ausgewählte Elemente vorübergehend entfernt, wenn sie nicht im Fokus sind (so dass sie nur auf die Größe der ausgewählten Größe angepasst werden).

    Sie können eine einfache function verwenden:

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

    Dann benutze es einfach in deinem form select Element:

     $(this).getSelectWidth(); 

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

    Du kannst das auch versuchen

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