webentwicklung-frage-antwort-db.com.de

So erweitern Sie die Breite der Auswahloptionen, nachdem der Benutzer eine Option auswählen möchte

Vielleicht ist das eine einfache Frage, vielleicht auch nicht. Ich habe ein Auswahlfeld, in dem ich mit der Breite fest codiere. Sagen wir 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 sein, die zweite Option anzuzeigen, damit der Benutzer den gesamten Text sehen kann.

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

26
Berlin Brown

Wenn Sie die Option bereits in einem Fix mit <select> Enthalten haben und die Breite nicht programmgesteuert ändern möchten, haben Sie möglicherweise Pech, es sei denn, Sie werden ein wenig kreativ.

  • Sie können versuchen, das Attribut title für jede Option festzulegen. Dies ist kein Standard-HTML (wenn Sie diesen kleinen Verstoß hier beachten), aber IE (und auch Firefox)) zeigt den gesamten Text in einem Maus-Popup an, wenn Sie den Mauszeiger bewegen.
  • Sie können JavaScript verwenden, um den Text in einem bestimmten DIV anzuzeigen, wenn der Benutzer etwas auswählt. IMHO ist dies die nicht so schöne Methode, da JavaScript erforderlich ist, um überhaupt zu funktionieren, und es funktioniert nur nachdem etwas ausgewählt wurde - bevor sich der Wert ändert, werden keine Ereignisse für das Auswahlfeld ausgelöst.
  • Sie verwenden überhaupt kein Auswahlfeld, aber implementieren Sie die Funktionalität mit anderem Markup und CSS . Nicht mein Favorit, aber ich wollte es erwähnen.

Wenn Sie später über JavaScript eine lange Option hinzufügen, sehen Sie hier nach: So aktualisieren Sie das HTML-Auswahlfeld dynamisch im IE

12
Tomalak

Ich habe mein Problem mit dem folgenden Code behoben:

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

Ich hoffe es hilft!

Prost, Cychan

14
cychan

Dies ahmt die meisten Verhaltensweisen nach, nach denen Sie suchen:

  <!--

     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>

Dadurch wird ein Teil des Tastendruckverhaltens außer Kraft gesetzt.

5
Doug Peil

Ich habe es auf meiner Seite bootstrap festgelegt, indem ich die minimale und maximale Breite in der Auswahl auf den gleichen Wert gesetzt habe und dann den select: focus auf auto gesetzt habe.

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

Legen Sie es in ein div und geben Sie ihm eine ID

<div id=myForm>

dann erstelle eine wirklich sehr einfache CSS, die dazu passt.

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

Das ist alles was du brauchst.

3
tpham211

Sehr alte Frage, aber hier ist die Lösung. Hier haben Sie ein funktionierendes Snippet mit jquery. Es verwendet ein temporäres Hilfsmittel select, in das die ausgewählte Option aus der Hauptauswahl kopiert wird, so dass man die wahre Breite einschätzen kann, die die Hauptauswahl select haben sollte.

$('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>ABC</option>
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
</select>

Eine einfache Lösung, die ich für eine vorhandene Site in IE (mit jQuery, aber ich kann mit eventListener-Code zurückschreiben, wenn Sie JS wirklich nicht so gut kennen) verwendet habe, ist die Folgendes:

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

Verwenden Sie natürlich eine Variable (var cWidth = jQuery('#mySelect').width();), um die vorherige Breite zu speichern, aber dies ist alles, was erforderlich war, damit unsere wie erwartet funktioniert.

1
Eric

Stichprobe

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 folgende Code löst das Problem der Dropdown-Listenbreite, indem er nach dem Einfügen von Daten in die Dropdown-Liste hinzugefügt wird.

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

Ich habe die Lösung des Cychan verbessert, um so zu sein:

<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 in CSS-Klassen verwendeten PNGs werden hier hochgeladen ...

Und du brauchst noch JQuery .....

0
Saeed

sie können versuchen, das Problem nur mit CSS zu lösen. durch Hinzufügen einer Klasse zur Auswahl

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

für weitere Informationen Listenfeldstil in einem bestimmten Element (Option) HTML

Mehrfachauswahl-Listenfeld

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

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

Was natürlich eine versteckte Div erfordern würde.

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

ohh und du brauchst jQuery

0
Pim Jager