Ausgewählte Option des Auswahlfelds festlegen

258

Ich möchte eine Option festlegen, die zuvor beim Laden der Seite angezeigt wurde. Ich versuchte es mit dem folgenden Code:Ausgewählte Option des Auswahlfelds festlegen

$("#gate").val('Gateway 2');

mit

<select id="gate"> 
    <option value='null'>- choose -</option> 
    <option value='Gateway 1'>Gateway 1</option> 
    <option value='Gateway 2'>Gateway 2</option> 
</select>

Aber das funktioniert nicht. Irgendwelche Ideen?

Quelle

2011-01-13 Lost in OWL

Eigentlich sollte es so funktionieren, sind Sie sicher, dass Sie den Wert in document.ready() setzen? Vielleicht wird der Code ausgeführt, wenn die Selectbox noch nicht bereit ist. – Morph

385

Dies sollte definitiv funktionieren. Here's a demo. Stellen Sie sicher, dass Sie Ihren Code in einen $(document).ready gesetzt haben:

$(function() { 
    $("#gate").val('Gateway 2'); 
});

Quelle

2011-01-13 12:38:56

ok, wenn ich die Liste drop es ist markiert, aber nicht als erstes Element in der Liste angezeigt –

@ArtWorkAD, was meinst du mit dem ersten Element in der Liste? Ich verstehe deine Anforderung nicht ganz. –

ahh ich habe es nicht in der dokumentenfertigen funktion deklariert ... danke! –

Das funktioniert gut. Siehe diese Geige: http://jsfiddle.net/kveAL/

Es ist möglich, dass Sie Ihre jQuery in einem $(document).ready() Handler erklären müssen?

Könnten Sie auch zwei Elemente mit der gleichen ID haben?

Quelle

2011-01-13 12:40:01

124

$(document).ready(function() { 
    $("#gate option[value='Gateway 2']").prop('selected', true); 
    // you need to specify id of combo to set right combo, if more than one combo 
});

Quelle

2011-01-13 12:48:14 Zkoh

Funktioniert einwandfrei. – Cyber

-1

Ich hatte ein Problem, wo der Wert wegen eines Syntaxfehlers vor dem Aufruf nicht festgelegt wurde.

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val 
$("#gate").val('Gateway 2'); //this line didn't work.

Vor dem Anruf auf Syntaxfehler prüfen.

Quelle

2013-11-21 20:51:15 howard

So nützlich wie es ist, an Syntaxfehler zu erinnern, ist dies keine Antwort. –

-1

// Make option have a "selected" attribute using jQuery 

var yourValue = "Gateway 2"; 

$("#gate").find('option').each(function(i, opt) { 
    if(opt.value === yourValue) 
     $(opt).attr('selected', 'selected'); 
});

Quelle

2014-02-10 15:43:38

Dies wird Schleife sogar über den ausgewählten Wert, der ineffizient ist –

Plus '.attr()' war der falsche Weg, dies zu tun, lange bevor diese Antwort veröffentlicht wurde. – Auspex

$(function() { 
$("#demo").val('hello'); 
});

Quelle

2014-08-02 10:14:22

$('#gate').val('Gateway 2').prop('selected', true);

Quelle

2014-09-02 21:26:58

Seltsam viele übersehen diese Lösung. – adi518

Sehr ähnlich zu $ ('# your-select-box-id: nth-child (2)'). Prop ('ausgewählt', true) 'was funktioniert, mit visueller Aktualisierung der Drop-Box. –

Mein Problem

get_courses(); //// To load the course list 
$("#course").val(course); //// Setting default value of the list

hatte ich das gleiche Problem. Der einzige Unterschied aus dem Code ist, dass ich die Auswahlbox durch einen Ajax-Aufruf geladen wurde und wenn der Ajax-Aufruf ausgeführt wurde ich den Standardwert der Auswahlbox

Die Lösung

get_courses(); 
    setTimeout(function() { 
    $("#course").val(course); 
    }, 10);

Quelle

2015-08-07 03:58:07 Korah

Sie analysiert das Problem richtig, aber die Lösung ist schlecht und zerbrechlich. Sie müssen eine Callback-Funktion verwenden, die an Ihren Ajax-Anruf angehängt ist. – icksde

-2

Addition gesetzt hatte @icksde und @Korah (thx beide!)

Beim Bau der Optionen mit AJAX die document.ready ausgelöst werden kann, bevor die Liste erstellt wird, so

Das funktioniert nicht

$(document).ready(function() { 
    $("#gate").val('Gateway 2'); 
});

Dies tut

Ein Timeout funktioniert aber wie @icksde sagt es instabil ist (Ich brauche eigentlich 20ms anstelle von 10 ms). Es ist besser, es in der AJAX-Funktion wie folgt zu passen:

$("#someObject").change(function() { 
    $.get("website/page.php", {parameters}, function(data) { 
     $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>"); 
     $("#gate").val('Gateway 2'); 
    }, "json"); 
});

Quelle

2016-06-25 19:09:05

Ich habe gefunden, die jQuery .val() Methode verwendet einen erheblichen Nachteil zu haben.

<select id="gate"></select> 
$("#gate").val("Gateway 2");

Wenn dieses Auswahlfeld (oder eine andere Eingabeobjekt) in einer Form vorliegt, und es gibt eine Reset-Taste in der Form verwendet, wenn die Reset-Taste, um den eingestellten Wert angeklickt wird, wird zurückgesetzt erhalten gelöscht und nicht auf dem Anfangswert, wie Sie es erwarten würden.

Das scheint das Beste für mich zu arbeiten.

Für Select Boxen

<select id="gate"></select> 
$("#gate option[value='Gateway 2']").attr("selected", true);

Für Texteingaben

<input type="text" id="gate" /> 
$("#gate").attr("value", "your desired value")

Für TextArea- Eingänge

<textarea id="gate"></textarea> 
$("#gate").html("your desired value")

Für Checkbox Boxen

<input type="checkbox" id="gate" /> 
$("#gate option[value='Gateway 2']").attr("checked", true);

Für Radio-Buttons

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/> 
$("#gate[value='this']").attr("checked", true);

Quelle

2016-07-07 23:31:38 Mike

$("#form-field").val("5").trigger("change");

Quelle

2017-03-20 08:29:44

Es wäre schön gewesen, wenn Sie einige Informationen dazu hinzugefügt hätten. Dies ist ein großartiges Beispiel dafür, wie Sie dies tun sollten, wenn Sie Code haben, der auf Änderungen an der Auswahl wartet. –

Dies ist eine weitere Option wäre:

$('.id_100 option[value=val2]').prop('selected', true);

Quelle

2017-04-18 02:42:17

Ich hatte das gleiche Problem.

Lösung: fügen Sie eine Aktualisierung hinzu.

$("#gate").val('Gateway 2'); 
$("#gate").selectmenu('refresh');

Quelle

2017-05-13 02:13:40 Posted

dies ist nur für jqueryui selectmenu, nicht standard html – stuartdotnet

Antwort

Verwandte Themen