Hinzufügen von Titel-Attribut, wählen Sie die option dynamisch mit .append()

Javascript, Jquery, HTML

Ich bin hinzufügen, wählen Sie Optionen, um eine select-box dynamisch. Ich nehme jede eindeutige element in einem array und füge es als option für das select-element. Es funktioniert Super, aber ich muss noch ein title-Attribut zur gleichen Zeit, mit demselben Wert wie die option text. Das Ziel dieser ist, um tooltips für jede option.

Also statt <option>value</option> sieht es aus wie

<option title="value">value</option>

Macht das Sinn?

Aktuelle HTML:

<select id="Process_Issue" class="fieldLabel2 IncidentInputField dynamicFields1"></select>

JS:

$.each(eliminateDuplicates(aryProcess), function (key, value) { $('#Process_Issue').append($("<option/>", { text: cleanNulls(value) })); });

InformationsquelleAutor dah97765 | 2013-11-26

  1. 2

    Können Sie einfach geben Sie die Titel auf anfügen:

    JSFiddle

    HTML

    <select id="my_select"></select>

    JS

    $('#my_select').append('<option title="value1">value1</option>');
$('#my_select').append('<option title="value2">value2</option>');
$('#my_select').append('<option title="value3">value3</option>');
    Alle Antworten bisher richtig sind, aber Sie hatten es zuerst und seine weitere inline mit meinem aktuellen code. Ich habe es in einer Schleife offensichtlich (statt Wert1, Wert2, etc.). Vielen Dank für die schnelle Reaktion!
    Froh, dass ich helfen konnte, dachte ich, dass ein mehr straight-forward beantworten, was Sie wollte.

    InformationsquelleAutor MonkeyZeus

  2. 2

    Können Sie die title Attribut

    $('#Process_Issue').append(
    $("<option/>", { text: value }).attr("title",value)
 );

    Hier ist ein funktionierendes Beispiel http://jsbin.com/ozudoTod/1/

    Das ist ziemlich viel, was ich am Ende mit, die auf der Antwort basiert, die aus MonkeyZeus. Ich mag das format: $('#Process_Issue').append($('<option title="' + cleanNulls(Wert) + '">' + cleanNulls(Wert) + '</option>')); sondern als das, was Sie haben (und was hatte ich, als ich die Frage gepostet). Ich glaube, es liest sich besser und ist weniger verwirrend, auf einen Blick.

    InformationsquelleAutor Shyju

  3. 1

    Scheinen Sie zu sein, mit der gleichen Selektor mehrere Male für jede iteration in dem array. Stattdessen cache und speichern Sie einige lookup-Zeit.

    var $select = $('#Process_Issue');
$.each(eliminateDuplicates(aryProcess), function (key, value) { 
     var val = cleanNulls(value);
     $select .append($("<option/>", { 
          text: val,
          title: val
     })); 
});

    Wenn dies nicht funktioniert, verwenden Sie .attr Methode, um hook up das Attribut auf das element.

    var $select = $('#Process_Issue');
$.each(eliminateDuplicates(aryProcess), function (key, value) { 
    var val = cleanNulls(value);
    $('<option/>').attr({
         text: val,
         title: val
    }).appendTo($select);
});
    du hast Recht. Es wird jedoch immer nur ein paar Optionen, die in jeder select-Feld (multiple select-Boxen, alles geschieht dynamisch auf Nachfrage), aber mit ~12 oder weniger Optionen, also bin ich nicht allzu besorgt über die Geschwindigkeit in diesem Fall. Gute Antwort!

    InformationsquelleAutor Sushanth --

  4. 1

    Ein sauberer Weg ist, um das element zu erstellen bevor mit allen Werten, dann Anhängen, etwa so:

    value = cleanNulls( value );
var option = $( '<option/>', {
    title: value,
    text: value
});

$('#Process_Issue').append( option );

    diese Methode ist viel sauberer und einfacher zu Lesen /pflegen

    sehr ähnlich zu der Antwort von Sushanth .. und gut. Danke!

    InformationsquelleAutor kkemple

Schreibe einen Kommentar