So erweitert ‚die Option‘ Option Breite nach dem Benutzer eine Option auswählen

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

Frage

Vielleicht ist dies eine einfache Frage, vielleicht auch nicht. Ich habe eine Auswahlbox, wo ich mit einer Breite hart codieren. Sprich 120px. 

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

Ich möchte in der Lage, die zweite Möglichkeit zu zeigen, so dass der Benutzer die volle Länge des Textes sehen.

Wie alles andere. Dies funktioniert in Firefox, aber nicht mit Internet Explorer6 arbeiten.

War es hilfreich?

Lösung

Wenn Sie die Möglichkeit haben, bereits bestehende in einem Fest mit <select>, und Sie wollen nicht programmatisch die Breite zu ändern, Sie kein Glück sein könnten, wenn Sie ein wenig kreativ.

  • Sie könnten versuchen, und stellen Sie die title Attribut auf jede Option. Das ist Nicht-Standard-HTML (wenn Sie für diese geringfügige Übertretung hier kümmern), aber IE (und Firefox als auch) den gesamten Text in einem Maus-Popup auf Mausbewegung angezeigt werden soll.
  • Sie können JavaScript verwenden, um den Text in einigen positioniert DIV zu zeigen, wenn der Benutzer etwas auswählt. IMHO dies die ist nicht so schön Art und Weise, es zu tun, weil es auf JavaScript erfordert überhaupt funktioniert, und es funktioniert nur nach etwas ausgewählt wurde - bevor es Wert ist eine Änderung keine Ereignisse für die Auswahlbox abzufeuern.
  • Sie haben nicht eine Auswahlbox taugen, aber implementieren es ist Funktionalität andere Markup und CSS verwenden. Nicht mein Favorit, aber ich wollte es erwähnen.

Wenn Sie eine lange Option hinzufügen, später durch JavaScript, schauen Sie hier: Wie HTML aktualisieren‚wählen Sie‘Feld dynamisch in IE

Andere Tipps

ich mein Problem mit dem folgenden Code festgelegt: 

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

Hoffe, es hilft!

Cheers, Cychan

Dies ahmt die meisten das Verhalten Ihrer Suche:       

  <!--

     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>

Dies wird einen Teil des Tastendruckverhaltens außer Kraft setzen.

Legen Sie sie in einem div und geben Sie ihm eine ID 

<div id=myForm>

erstellen Sie dann einen wirklich wirklich einfachen CSS mit ihm zu gehen. 

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

Das ist alles, was Sie brauchen.

Ich reparierte es in meiner Bootstrap-Seite durch die min-width und max-width auf den gleichen Wert in der Einstellung auswählen und dann die Einstellung der Auswahl. Fokus auf 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>

Eine einfache Lösung, die ich für eine bestehende Website in IE verwendet (mit jQuery, aber ich kann mit eventListener Code Post zurück, wenn Sie wirklich JS nicht wissen, dass gut) ist die folgende: 

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

Natürlich verwendet eine Variable (var cWidth = jQuery('#mySelect').width();) die vorherige Breite zu speichern, aber das ist alles, was erforderlich war für uns wie man es erwarten würde zu arbeiten.

Beispiel 

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

Der Code unten wird Ihr Problem von Dropdownlist Breite lösen, indem Sie diesen Code nach dem Einfügen von Daten zu Dropdownlist. 

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

Okay, diese Option ziemlich hackish ist, sollte aber funktionieren. 

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

Welche offcourse würde eine versteckte div erfordern. 

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

ohh, und Sie werden jQuery benötigen

verbesserte ich die Lösung des cychan zu sein, wie folgt aus: 

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

Die PNGs in CSS-Klassen verwendet werden, hier hochgeladen ...

Und Sie müssen noch JQuery .....

können Sie versuchen, und nur mit CSS lösen. durch Zugabe von Klasse wählen 

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

Für weitere Referenz List Box Style in ein bestimmtes Element (Option) HTML

Multi Select List Box

Sehr alte Frage, aber hier ist die Lösung. Hier haben Sie einen Arbeits Schnipsel mit jquery. Es macht die Verwendung eines temporären Hilfs select, in denen die gewählte Option aus der Hauptauswahl kopiert wird, so dass man die wahre Breite beurteilen kann, welche die Haupt select haben sollten. 

$('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>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top