it-swarm.com.de

Zeilenumbruch in HTML Option wählen?

Kann ich in einer HTML-Auswahloption einen zweizeiligen Text verwenden? Wie?

42

Nein, Browser bieten diese Formatierungsoption nicht an.

Sie könnten es wahrscheinlich mit einigen Checkboxen mit <label>s fälschen und JS verwenden, um daraus ein Flyout-Menü zu erstellen.

26
Quentin

Ich weiß, dass dies ein älterer Beitrag ist, aber ich lasse dies für wen auch immer in der Zukunft.

Sie können Zeilenumbrüche nicht in eine Option formatieren. Sie können jedoch mit dem Titelattribut einen Mouse-Over-Tooltip angeben, um die vollständigen Informationen anzuzeigen. Verwenden Sie eine kurze Beschreibung im Optionstext und geben Sie im Titel die volle Skinny an.

<option value="1" title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!">1</option>
34
jcanker

Ein bisschen hack, aber dies hat den Effekt einer mehrzeiligen Auswahl, fügt eine graue bgcolor für Ihre mehrzeilige Zeile ein.... Und wenn Sie einen der grauen Texte auswählen, wird der erste der Gruppierung ausgewählt Ein bisschen schlau würde ich sagen:) Die erste Option zeigt auch, wie Sie ein Titel-Tag auch für eine Option einfügen können.

 function SelectFirst(SelVal) {
   var arrSelVal = SelVal.split(",")
   if (arrSelVal.length > 1) {
     Valuetoselect = arrSelVal[0];
     document.getElementById("select1").value = Valuetoselect;
   }
 }
<select name="select1" id="select1" onchange="SelectFirst(this.value)">
  <option value="1" title="this is my long title for the yes option">Yes</option>
  <option value="2">No</option>
  <option value="2,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for the no option</option>
  <option value="2,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the no option</option>
  <option value="3">Maybe</option>
  <option value="3,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for Maybe option</option>
  <option value="3,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the Maybe option</option>
  <option value="3,3" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 3 for the Maybe option</option>
</select>

11
brian

Wie wäre es, wenn Sie den langen Text in einen anderen <option> rechts darunter einfügen und ihn deaktivieren? Könnte eine Lösung für jemanden sein, der hier postet.

        <select>
            <option>My real option text</option>
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and my really really long option text that is basically a continuation of previous option)</option> 
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and still continuing my previous option)</option> 
            <option>Another real option text</option>
        </select>

11
joym8

HTML Quelltext

<section style="background-color:rgb(237.247.249);">
    <h2>Test of select menu (SelectboxIt plugin)</h2>
    <select name="select_this" id="testselectset">
        <option value="01">Option 1</option>
        <option value="02">Option 2</option>
        <option value="03">Option 3</option>
        <option value="04">Option 4</option>
        <option value="05">Option 5</option>
        <option value="06">Option 6</option>
        <option value="07">Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
        <option value="08">Option 8</option>
        <option value="09">Option 9</option>
        <option value="10">Option 10</option>
    </select>
</section>

Javascript Code

$(function(){
    $("#testselectset").selectBoxIt({
        theme: "default",
        defaultText: "Make a selection...",
        autoWidth: false
    });
});

CSS-Code

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
    width: 400px; /* Width of the dropdown button */
    border-radius:0;
    max-height:100px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}

und Sie müssen einige Jquery-Bibliothek hinzufügen select Box Jquery CSS

Jquery Ui Min JS

SelectBox Js

Bitte überprüfen Sie diesen Link JsFiddle Link

6
Arjun

Funktioniert nicht vollständig (der hr line-Teil) in allen Browsern, aber hier ist die Lösung:

<select name="selector">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option disabled><hr></option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>

1
Justin Levene

Versuchen Sie stattdessen, select mit Markup zu ersetzen, z.

// Wrap any selects that should be replaced
$('select.replace').wrap('<div class="select-replacement-wrapper"></div>');

// Replace placeholder text with select's initial value
$('.select-replacement-wrapper').each(function() {
	$(this).prepend('<a>' + $('select option:selected', this).text() + '</a>');
});

// Update placeholder text with updated select value
$('select.replace').change(function(event) {
  $(this).siblings('a').text( $('option:selected', this).text() );
});
/* Position relative, so that we can overlay the hidden select */
.select-replacement-wrapper {
  position: relative;
  border: 3px solid red; /* to show area */
  width: 33%;
  margin: 0 auto;
}

/* Only shows if JS is enabled */
.select-replacement-wrapper a {
  /* display: none; */
  /* Notice that we've centered this text - 
   you can do whatever you want, mulitple lines wrap, etc, 
   since this is not a select element' */
  text-align: center;
  display: block;
  border: 1px solid blue;
}

select.replace {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border: 1px solid green;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<select id="dropdown" class="replace">
  <option value="First">First</option>
  <option value="Second" selected>Second, and this is a long line, just to show wrapping</option>
  <option value="Third">Third</option>
</select>

0
RogerRoger