Szerokość Dropdownlist w IE

W IE lista rozwijana ma taką samą szerokość jak dropbox (mam nadzieję, że to ma sens), podczas gdy w Firefoksie szerokość listy rozwijanej zmienia się w zależności od zawartości.

Oznacza to w zasadzie, że muszę upewnić się, że dropbox jest wystarczająco szeroki, aby wyświetlić możliwie najdłuższy wybór. To sprawia, że moja strona wygląda bardzo brzydko: (

Czy istnieje jakieś obejście tego problemu? Jak mogę użyć CSS, aby ustawić różne szerokości dla dropbox i dropdownlist?

Author: Carl Manaster, 2008-09-16

27 answers

Oto kolejny przykład oparty na jQuery. W przeciwieństwie do wszystkich innych odpowiedzi zamieszczonych tutaj, bierze pod uwagę wszystkie zdarzenia klawiatury i myszy, zwłaszcza kliknięcia:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Użyj go w połączeniu z tym kawałkiem CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Wszystko, co musisz zrobić, to dodać klasę wide do rozwijanych elementów.

<select class="wide">
    ...
</select>

Oto przykład jsfiddle . Mam nadzieję, że to pomoże.

 102
Author: BalusC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-25 19:29:50

Tworzenie własnej listy rozwijanej jest bardziej bolesne niż jest warte. Możesz użyć trochę JavaScript, aby IE rozwijanej pracy.

Używa trochę biblioteki YUI i specjalnego rozszerzenia do naprawiania pól wyboru IE.

Będziesz musiał dołączyć następujące elementy i zawinąć <select> elementy w <span class="select-box">

Umieść je przed tagiem body Twojej strony:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

Akceptacja postu edit:

Można to również zrobić bez biblioteki YUI i kontroli Hack. All you naprawdę trzeba to zrobić, to umieścić onmouseover= " to.styl./ width = "auto" / onmouseout = " this.styl./ width=" 100px " / " (lub jak chcesz) na zaznaczonym elemencie. Kontrola YUI daje mu ładną animację, ale nie jest to konieczne. To zadanie może być również wykonane z jquery i innych bibliotek (chociaż nie znalazłem wyraźnej dokumentacji dla tego)

-- poprawka do edycji:
IE ma problem z onmouseout dla wybranych kontrolek (nie uważa, że mouseover na opcjach jest mouseover na zaznaczenie). To sprawia, że korzystanie z mouseout jest bardzo trudne. Pierwsze rozwiązanie jest najlepsze, jakie do tej pory znalazłem.

 14
Author: Sleep Deprivation Ninja,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-17 11:47:49

Możesz po prostu spróbować następujących rzeczy...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"
Próbowałem i działa na mnie. Nic więcej nie jest wymagane.
 12
Author: Sai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-25 06:17:57

Użyłem poniższego rozwiązania i wydaje się, że działa dobrze w większości sytuacji.

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

Uwaga: $.przeglądarka.msie wymaga jquery.

 9
Author: Justin Fisher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-04-27 19:07:17

@Thad musisz również dodać obsługę zdarzenia blur

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

To jednak nadal rozszerzy pole wyboru po kliknięciu, zamiast tylko elementów. (i wydaje się, że nie działa w IE6, ale działa doskonale w Chrome i IE7)

 7
Author: Tinus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-25 04:24:39

Nie da się tego zrobić w IE6/IE7 / IE8. Kontrola jest rysowana przez aplikację i IE po prostu nie rysuje jej w ten sposób. Najlepszym rozwiązaniem jest wdrożenie własnego rozwijanego poprzez prosty HTML / CSS / JavaScript, jeśli jest to tak ważne, aby mieć rozwijaną jedną szerokość, A listę inną szerokość.

 5
Author: Robert C. Barth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 16:19:00

Jeśli używasz jQuery to wypróbuj wtyczkę IE select width:

Http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

Zastosowanie tej wtyczki sprawia, że pole wyboru w Internet Explorerze wydaje się działać tak, jak w Firefoksie, Operze itp., umożliwiając otwieranie elementów opcji na pełnej szerokości bez utraty wyglądu i stylu stałej szerokości. Dodaje również obsługę wypełnień i obramowań w polu wyboru w przeglądarce Internet Explorer 6 i 7.

 5
Author: Ewen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-09-21 11:50:10

W jQuery działa to dość dobrze. Załóżmy, że lista rozwijana ma id = "lista rozwijana".

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});
 4
Author: Eran Medan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-30 11:40:45

Oto najprostsze rozwiązanie.

Zanim zacznę, muszę powiedzieć, że rozwijane pole wyboru Automatycznie rozszerzy się w prawie wszystkich przeglądarkach z wyjątkiem IE6. Tak więc, chciałbym zrobić przeglądarkę sprawdzić (czyli IE6) i napisać następujące Tylko do tej przeglądarki. Zaczyna się. Najpierw sprawdź przeglądarkę.

Kod magicznie rozszerzy rozwijane pole wyboru. Jedynym problemem z rozwiązaniem jest onmouseover rozwijane zostanie rozszerzone do 420px, a ponieważ overflow = hidden jesteśmy ukrywanie rozszerzonego rozmiaru rozwijanego menu i wyświetlanie go jako 170px; tak więc strzałka po prawej stronie ddl będzie ukryta i nie będzie widoczna. ale pole wyboru zostanie rozszerzone do 420px; co jest tym, czego naprawdę chcemy. Po prostu wypróbuj poniższy kod i użyj go, jeśli ci się podoba.

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

Powyżej jest IE6 CSS. Wspólny CSS dla wszystkich innych przeglądarek powinien być jak poniżej.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
 3
Author: bluwater2001,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-24 06:49:02

Jeśli chcesz mieć proste menu rozwijane i / lub rozwijane bez efektów przejścia, użyj CSS... można wymusić IE6 do obsługi: hover na wszystkich elementach za pomocą .plik htc (css3hover?) z zachowaniem (tylko właściwością IE6) zdefiniowanym w warunkowo dołączonym pliku CSS.

 2
Author: cam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-12-09 17:32:48

Zobacz też. nie jest idealny ale działa i jest tylko dla IE i nie wpływa na FF. Użyłem zwykłego javascript dla onmousedown, aby ustalić tylko poprawkę IE.. ale msie z jquery może być również używany w onmousedown.. główną ideą jest "onchange" i rozmycie, aby pole wyboru powróciło do normy... zdecyduj, że masz własną szerokość. Potrzebowałem 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
 2
Author: lucien,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-15 19:05:42

Powyższa odpowiedź Balusca działa świetnie, ale jest mała poprawka, którą dodałbym, jeśli zawartość rozwijanego menu ma mniejszą szerokość niż to, co zdefiniujesz w swoim CSS select.rozwiń, dodaj to do mouseover bind:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})
 2
Author: jbabey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-08-16 16:04:44

To jest coś, co zrobiłem biorąc kawałki z cudzych rzeczy.

        $(document).ready(function () {
        if (document.all) {

            $('#<%=cboDisability.ClientID %>').mousedown(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboDisability.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboDisability.ClientID %>').change(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').mousedown(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboEthnicity.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').change(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
            });

        }
    });

Gdzie cboEthnicity i cboDisability są rozwinięciami z tekstem opcji szerszym niż szerokość samego select.

Jak widzisz, mam określony dokument.wszystko jak to działa tylko w IE. Ponadto l zamknął rozwijane elementy w elementach div, takie jak:

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

To zajmuje się innymi elementami przesuwającymi się poza miejsce, gdy rozwijana lista rozszerza się. Jedynym minusem jest to, że funkcja menulist visual znika po zaznaczeniu, ale powraca natychmiast po zaznaczeniu.

Mam nadzieję, że to komuś pomoże.
 2
Author: Derrick,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-17 17:20:21

To jest najlepszy sposób, aby to zrobić:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}
Jest dokładnie taki sam jak rozwiązanie BalusC. Tylko tak jest łatwiej. ;)
 2
Author: mcmwhfy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-02 16:03:16

Dostępna jest pełna wtyczka jQuery. Obsługuje Nietłukący układ i interakcje z klawiaturą, sprawdź stronę demo: http://powerkiki.github.com/ie_expand_select_width/

Disclaimer: zakodowałem to coś, patches welcome

 2
Author: PowerKiKi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-20 11:47:53
 1
Author: Ybbest,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-12-09 11:53:18

Rozwiązanie jQuery BalusC poprawione przeze mnie. Używany również: Brad Robertson ' s skomentuj tutaj .

Po prostu włóż to do .js, użyj szerokiej klasy do pożądanych kombinacji i nie podrabiaj, aby nadać jej Id. Wywołanie funkcji w onload (lub documentReady lub cokolwiek).
As simple ass that:)
Szerokość zdefiniowana dla kombinacji będzie określana jako minimalna długość.

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}
 1
Author: Federico Valido,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-05 19:28:13

Możesz dodać styl bezpośrednio do elementu select:

<select name="foo" style="width: 200px">

Więc ten element będzie miał szerokość 200 pikseli.

Alternatywnie można zastosować klasę lub id do elementu i odwołać się do niego w arkuszu stylów

 0
Author: Katy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 16:11:37

Jak na razie nie ma. Nie znam IE8, ale nie można tego zrobić w IE6 i IE7, chyba że zaimplementujesz własną funkcjonalność listy rozwijanej za pomocą javascript. Są przykłady jak to zrobić w sieci, choć nie widzę większych korzyści w powielaniu istniejących funkcjonalności.

 0
Author: pilsetnieks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 16:15:24

Mamy to samo na asp:dropdownlist:

W Firefoksie(3.0.5) rozwijana jest szerokość najdłuższego elementu z rozwijanej listy, która ma szerokość 600 pikseli lub coś w tym stylu.

 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-03 15:57:54

To wydaje się działać z IE6 i nie wydaje się łamać innych. Inną miłą rzeczą jest to, że zmienia menu automatycznie, gdy tylko zmienisz listę rozwijaną.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});
 0
Author: lhoess,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-07-21 21:36:01

Łącze hedgerwow (the Yui animation work-around) w pierwszej najlepszej odpowiedzi jest zepsute, domyślam się, że domena wygasła. Skopiowałem kod zanim wygasł, więc możesz go znaleźć tutaj (właściciel kodu może dać mi znać, jeśli naruszam jakiekolwiek prawa autorskie, przesyłając go ponownie)

Http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

W tym samym wpisie na blogu pisałem o zrobieniu dokładnie tego samego elementu SELECT jak normalny za pomocą menu przycisków Yui. Zobacz i daj mi znać, jeśli to pomoże!

 0
Author: Hammad Tariq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-04 05:18:14

Na podstawie rozwiązania opublikowanego przez Sai , Oto Jak to zrobić z jQuery.

$(document).ready(function() {
    if ($.browser.msie) $('select.wide')
        .bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
        .bind('blur', function() { $(this).css({position:'static',width:''}); });
});
 0
Author: Ahmad Alfy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:16:32

Pomyślałem, że rzucę kapelusz na ring. Robię aplikację SaaS i miałem menu select osadzone wewnątrz tabeli. Ta metoda zadziałała, ale przekrzywiła wszystko w tabeli.

onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"

Więc to, co zrobiłem, aby wszystko było lepsze, to wrzucić select wewnątrz z-indeksowanego div.

<td valign="top" style="width:225px; overflow:hidden;">
    <div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
        <select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
            <option value="0">All</option>
            <!--More Options-->
        </select>
    </div>
</td>
 0
Author: n0nag0n,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-08 20:07:47

Musiałem obejść ten problem i kiedyś wymyśliłem całkiem kompletne i skalowalne rozwiązanie działające dla IE6, 7 i 8 (i oczywiście kompatybilne z innymi przeglądarkami). Napisałem o tym cały artykuł tutaj: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

Pomyślałem, że podzielę się tym dla osób, które wciąż borykają się z tym problemem, ponieważ żadne z powyższych rozwiązań nie sprawdza się w każdym przypadku (moim zdaniem).

 0
Author: Aerendel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-27 23:10:54

Próbowałem wszystkich tych rozwiązań i żaden nie zadziałał całkowicie dla mnie. To właśnie wymyśliłem

$(document).ready(function () {

var clicknum = 0;

$('.dropdown').click(
        function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                $(this).css('position', '');
                $(this).css('width', '');
            }
        }).blur(
        function() {
            $(this).css('position', '');
            $(this).css('width', '');
            clicknum = 0;
        }).focus(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        }).mousedown(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        });
})(jQuery);

Pamiętaj, aby dodać klasę rozwijaną do każdego rozwijanego w Twoim html

Sztuczka polega na użyciu wyspecjalizowanej funkcji klikania (znalazłem ją tutaj podczas każdorazowego Wybierania elementu DropDownList za pomocą jQuery). Wiele innych rozwiązań tutaj używa zmiany obsługi zdarzenia, która działa dobrze, ale nie uruchomi się, jeśli użytkownik wybierze tę samą opcję, co poprzednio wybrane.

Podobnie jak wiele innych rozwiązań, funkcja focus i mousedown służy do ustawiania ostrości przez użytkownika, a funkcja blur-do usuwania.

Możesz też chcieć umieścić w tym jakieś wykrywanie przeglądarki, więc działa tylko na ie. Nie wygląda to źle w innych przeglądarkach

 0
Author: RasTheDestroyer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:00:40

Its testowane we wszystkich wersjach IE, Chrome, FF & Safari

Kod JavaScript:

<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}

function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->

Kod Html:

<select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
  <option value="0" selected="selected" readonly="readonly">Select</option>
  <option value="1" >Apple</option>
  <option value="2" >Orange + Banana + Grapes</option>
 0
Author: Arif,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-28 12:19:09