Ich habe ein Auswahlfeld:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

Ich möchte eine der Optionen basierend auf dem ausgewählten Index als "ausgewählt" festlegen.

Wenn ich beispielsweise versuche, "Nummer 3" zu setzen, versuche ich Folgendes:

$('#selectBox')[3].attr('selected', 'selected');

Das funktioniert aber nicht. Wie kann ich mit jQuery eine Option festlegen, die basierend auf ihrem Index ausgewählt wurde?

Vielen Dank!

HINWEIS : Die Antwort hängt von jQuery 1.6.1+ ab

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

Vielen Dank für den Kommentar, .getder nicht funktioniert, da er ein DOM-Element zurückgibt, kein jQuery-Element. Beachten Sie, dass die .eqFunktion auch außerhalb des Selektors verwendet werden kann, wenn Sie dies bevorzugen.

$('#selectBox option').eq(3).prop('selected', true);

Sie können auch knapper / lesbarer sein, wenn Sie den Wert verwenden möchten , anstatt sich auf die Auswahl eines bestimmten Index zu verlassen :

$("#selectBox").val("3");

Hinweis: .val(3) Funktioniert auch in diesem Beispiel, aber nicht numerische Werte müssen Zeichenfolgen sein. Daher habe ich aus Konsistenzgründen eine Zeichenfolge ausgewählt.
(zB <option value="hello">Number3</option>erfordert Sie zu verwenden .val("hello"))

Dies kann auch nützlich sein, daher dachte ich, ich würde es hier hinzufügen.

Wenn Sie einen Wert basierend auf dem Wert des Elements und nicht auf dem Index dieses Elements auswählen möchten, können Sie Folgendes tun:

Ihre Auswahlliste:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

Die Frage:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

Das ausgewählte Element wäre jetzt "Nummer 2".

Versuchen Sie stattdessen Folgendes:

$("#selectBox").val(3);

Noch einfacher:

$('#selectBox option')[3].selected = true;

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

Wenn Sie mit Top-Möglichkeiten für die Set-Auswahl auswählen möchten, können Sie
$('#select option').removeAttr('selected');frühere Auswahlen entfernen.

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

Es ist wichtig zu verstehen, dass val()für ein selectElement der Wert der ausgewählten Option zurückgegeben wird, nicht jedoch die Anzahl der Elemente wie selectedIndexin Javascript.

Um die Option mit auszuwählen value="7", können Sie einfach verwenden:

$('#selectBox').val(7); //this will select the option with value 7.

Um die Option aufzuheben, verwenden Sie ein leeres Array:

$('#selectBox').val([]); //this is the best way to deselect the options

Und natürlich können Sie mehrere Optionen auswählen *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* Um jedoch mehrere Optionen auszuwählen, <select>muss Ihr Element ein MULTIPLEAttribut haben, sonst funktioniert es nicht.

Ich hatte immer Probleme mit Requisiten ('ausgewählt'), Folgendes hat immer für mich funktioniert:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

Versuche dies:

$('select#mySelect').prop('selectedIndex', optionIndex);

Lösen Sie schließlich ein .change-Ereignis aus:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

Hoffe das könnte auch helfen

$('#selectBox option[value="3"]').attr('selected', true);

Wählen Sie die 3. Option

$('#selectBox').val($('#selectBox option').eq(2).val());

Beispiel auf jsfiddle

NB:

$('#selectBox option')[3].attr('selected', 'selected') 

Wenn dies falsch ist, erhalten Sie mit der Array-Rücksichtnahme das dom-Objekt, kein jquery-Objekt. Daher schlägt dies mit einem TypeError fehl, beispielsweise in FF mit: "$ ('# selectBox option') [3] .attr (), keine Funktion . "

Um die Antworten von Marc und John Kugelman zu klären, können Sie Folgendes verwenden:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() funktioniert nicht, wenn es auf die angegebene Weise verwendet wird, da es das DOM-Objekt und kein jQuery-Objekt erhält. Daher funktioniert die folgende Lösung nicht:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()Ruft Filter ab, die die jQuery auf die des Elements mit dem angegebenen Index gesetzt hat. Es ist klarer als $($('#selectBox option').get(3)). Es ist nicht so effizient. $($('#selectBox option')[3])ist effizienter (siehe Testfall ).

Sie benötigen das jQuery-Objekt jedoch nicht. Dies wird den Trick machen:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

Ein weiterer lebenswichtiger Punkt:

Mit dem Attribut "ausgewählt" geben Sie kein ausgewähltes Optionsfeld an (zumindest in Firefox und Chrome). Verwenden Sie das Attribut "geprüft":

$('#selectBox option')[3].checked = true;

Gleiches gilt für Kontrollkästchen.

In 1.4.4 erhalten Sie eine Fehlermeldung: $ ("# selectBox option") [3] .attr ist keine Funktion

Das funktioniert: $('#name option:eq(idx)').attr('selected', true);

Wo #nameist select id und idxist der Optionswert, den Sie auswählen möchten.

Das Attribut selectedIndex für reines Javascript ist der richtige Weg, da es reines Javascript ist und browserübergreifend funktioniert:

$('#selectBox')[0].selectedIndex=4;

Hier ist eine jsfiddle-Demo mit zwei Dropdowns, mit denen einer den anderen festlegt:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

Sie können dies auch aufrufen, bevor Sie den selectedIndex ändern, wenn Sie das Attribut "selected" im Options-Tag möchten ( hier ist die Geige ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

Ich benutze oft Trigger ('change'), damit es funktioniert

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

Beispiel mit id select = selectA1 und position_index = 0 (erste Option in select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

$('#selectBox option').get(3).attr('selected', 'selected')

Bei der Verwendung der oben genannten Informationen wurden im Webkit (Chrome) immer wieder Fehler angezeigt, die besagten:

"Nicht gefangener TypeError: Objekt # hat keine Methode 'attr'"

Diese Syntax stoppt diese Fehler.

$($('#selectBox  option').get(3)).attr('selected', 'selected');

Wählen Sie das Element basierend auf dem Wert in der Auswahlliste aus (insbesondere wenn die Optionswerte ein Leerzeichen oder ein seltsames Zeichen enthalten), indem Sie einfach Folgendes tun:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

Wenn Sie ein Dropdown-Menü haben (im Gegensatz zu einer Mehrfachauswahl), möchten Sie möglicherweise ein Dropdown-Menü ausführen, break;damit der gefundene erste Wert nicht überschrieben wird.

Ich benötige eine Lösung, die keine fest codierten Werte in der js-Datei enthält. mit selectedIndex. Die meisten der angegebenen Lösungen versagten in einem Browser. Dies scheint in FF10 und IE8 zu funktionieren (kann jemand anderes in anderen Versionen testen)

$("#selectBox").get(0).selectedIndex = 1; 

Wenn Sie nur ein Element basierend auf einer bestimmten Eigenschaft eines Elements auswählen möchten, erhält dieses Element die jQuery-Option vom Typ [prop = val]. Jetzt ist mir der Index egal, ich wollte nur den Artikel nach seinem Wert.

$('#mySelect options[value=3]).attr('selected', 'selected');

Ich hatte das gleiche Problem. Zuerst müssen Sie die Ereignisse durchgehen (dh welches Ereignis zuerst stattfindet).

Beispielsweise:

Das erste Ereignis generiert ein Auswahlfeld mit Optionen.

Das zweite Ereignis ist die Auswahl der Standardoption mit einer beliebigen Funktion wie val () usw.

Sie sollten sicherstellen, dass das zweite Ereignis nach dem ersten Ereignis eintritt .

Um dies zu erreichen, nehmen Sie zwei Funktionen, z. B. generateSelectbox () (zum Generieren der Auswahlbox) und selectDefaultOption ().

Sie müssen sicherstellen, dass selectDefaultOption () erst nach der Ausführung von generateSelectbox () aufgerufen wird.

Sie können auch mehrere Werte initiieren, wenn Ihre Auswahlbox ein Multiplikator ist:

$('#selectBox').val(['A', 'B', 'C']);

Sie können den Wert der Auswahloptionsvariablen dynamisch festlegen und die Option wird ausgewählt. Sie können den folgenden Code ausprobieren

Code:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

HTML QUELLTEXT:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

In Kürze:

$("#selectBox").attr("selectedIndex",index)

Dabei ist index der ausgewählte Index als Ganzzahl.