Überprüfen Sie, ob die Option mit jQuery ausgewählt ist, wenn nicht, wählen Sie eine Standardeinstellung


207

Wie können Sie mit jQuery prüfen, ob in einem Auswahlmenü eine Option ausgewählt ist, und wenn nicht, eine der ausgewählten Optionen zuweisen.

(Die Auswahl wird mit einem Labyrinth von PHP-Funktionen in einer App generiert, die ich gerade geerbt habe. Dies ist also eine schnelle Lösung, während ich mich mit diesen beschäftige :)


Antworten:


270

Ich bin mir zwar nicht sicher, was Sie genau erreichen möchten, aber dieser Code hat bei mir funktioniert.

<select id="mySelect" multiple="multiple">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length) {
    $("#mySelect option[value='3']").attr('selected', 'selected');
  }
});
</script>

86
Die Auswahl wäre leichter zu lesen:$("#mySelect").val(3);
Jørn Schou-Rode

6
Dies brachte mich auf den richtigen Weg, aber ich musste dies tun: Das habe ich $("#mySelect option")[2]['selected'] = true; herausgefunden, nachdem ich die Objektstrukturen in Firebug untersucht hatte.
Semperos

28
Ab jQuery 1.6 können Sie die Eigenschaft direkt festlegen. $("#mySelect").prop("selectedIndex", 2)
Gradbot

1
Die .val (x) -Version funktioniert in Internet Explorer 8 nicht, daher hat @gradbot das Recht, da dies in allen Browsern funktioniert.
Sorcy

30

Dazu muss jQuery nicht verwendet werden:

var foo = document.getElementById('yourSelect');
if (foo)
{
   if (foo.selectedIndex != null)
   {
       foo.selectedIndex = 0;
   } 
}

58
Das OP sagte: "Using jQuery ...", daher scheint es überflüssig, das zu ignorieren, nein?
BryanH

13
Wenn ich persönlich eine bestimmte Frage stelle, möchte ich die Antwort auf die Frage auf eine andere Weise erhalten.
Vitto

18
Manchmal ist die Antwort, die Sie suchen, nicht die, die Sie erwarten.
MrBoJangles

5
Unabhängig davon fragte er nach jQuery, und die jQuery-Antwort ist viel einfacher zu verstehen, insbesondere wenn man das Basis-JavaScript nicht versteht.
Shmeeps

6
Hervorragende Möglichkeit, manchmal kann Basis-Javascript sehr praktisch sein!
Hallaghan

13

Diese Frage ist alt und hat viele Ansichten, also werde ich einfach ein paar Sachen rauswerfen, die einigen Leuten helfen werden, da bin ich mir sicher.

So überprüfen Sie, ob ein ausgewähltes Element ausgewählte Elemente enthält:

if ($('#mySelect option:selected').length > 0) { alert('has a selected item'); }

oder um zu überprüfen, ob für eine Auswahl nichts ausgewählt ist:

if ($('#mySelect option:selected').length == 0) { alert('nothing selected'); }

oder wenn Sie sich in einer Schleife befinden und überprüfen möchten, ob das aktuelle Element ausgewählt ist:

$('#mySelect option').each(function() {
    if ($(this).is(':selected')) { .. }
});

So überprüfen Sie, ob in einer Schleife kein Element ausgewählt ist:

$('#mySelect option').each(function() {
    if ($(this).not(':selected')) { .. }
});

Dies sind einige der Möglichkeiten, dies zu tun. jQuery bietet viele verschiedene Möglichkeiten, um dasselbe zu erreichen. Daher wählen Sie normalerweise nur die aus, die am effizientesten erscheint.


"not" hat bei mir nicht funktioniert $ ('# mySelect option'). each (function () {if ($ (this) .not (': selected')) {..}}); Eine verwendete Negation ist also wie wenn (! $ (This) .is (': selected')) {..} Browser: Chrome; Jquery Version: 3.1.1
Anil Kumar

12

Lencionis Antwort würde ich empfehlen. Sie können den Selektor für die Option ändern ('#mySelect option:last'), um die Option mit einem bestimmten Wert mit " #mySelect option[value='yourDefaultValue']" auszuwählen . Mehr zu Selektoren .

Wenn Sie intensiv mit ausgewählten Listen auf dem Client arbeiten, lesen Sie dieses Plugin: http://www.texotela.co.uk/code/jquery/select/ . Schauen Sie sich die Quelle an, wenn Sie weitere Beispiele für die Arbeit mit Auswahllisten sehen möchten.


9

Hier ist meine Funktion, die die ausgewählte Option ändert. Es funktioniert für jQuery 1.3.2

function selectOption(select_id, option_val) {
    $('#'+select_id+' option:selected').removeAttr('selected');
    $('#'+select_id+' option[value='+option_val+']').attr('selected','selected');   
}

7
<script type="text/javascript"> 
$(document).ready(function() {
  if (!$("#mySelect option:selected").length)
   $("#mySelect").val( 3 );

});
</script>


3

Ich bin bereits auf das erwähnte Texotela-Plugin gestoßen , mit dem ich es folgendermaßen lösen konnte:

$(document).ready(function(){
    if ( $("#context").selectedValues() == false) {
    $("#context").selectOptions("71");
    }
});


2

Dies war ein schnelles Skript, das funktioniert hat. Das Ergebnis ist einem Label zugeordnet.

$(".Result").html($("option:selected").text());

1

Ihr macht viel zu viel für die Auswahl. Einfach nach Wert auswählen:

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

2
Hiermit wird Option 3 ausgewählt, unabhängig davon, ob bereits eine andere Option ausgewählt ist.
Jordan Ryan Moore


1

Ich habe eine gute Möglichkeit gefunden, zu überprüfen, ob die Option ausgewählt ist, und einen Standard auszuwählen, wenn dies nicht der Fall ist.

    if(!$('#some_select option[selected="selected"]').val()) {
        //here code if it HAS NOT selected value
        //for exaple adding the first value as "placeholder"
        $('#some_select option:first-child').before('<option disabled selected>Wybierz:</option>');
    }

Wenn #some_select has't Standard gewählte Option dann .val () ist nicht definiert


0
$("option[value*='2']").attr('selected', 'selected');
// 2 for example, add * for every option

0
$("#select_box_id").children()[1].selected

Dies ist eine weitere Möglichkeit, zu überprüfen, ob eine Option in jquery ausgewählt ist oder nicht. Dies gibt Boolean (True oder False) zurück.

[1] ist der Index der Auswahlfeldoption


0

Ändern Sie das Ereignis im Auswahlfeld in "Auslösen" und ziehen Sie anschließend einfach das ID-Attribut der ausgewählten Option: -

$("#type").change(function(){
  var id = $(this).find("option:selected").attr("id");

  switch (id){
    case "trade_buy_max":
      // do something here
      break;
  }
});

0

Ich habe nur nach etwas Ähnlichem gesucht und Folgendes gefunden:

$('.mySelect:not(:has(option[selected])) option[value="2"]').attr('selected', true);

Dadurch werden alle Auswahlmenüs in der Klasse gefunden, für die noch keine Option ausgewählt ist, und die Standardoption (in diesem Fall "2") ausgewählt.

Ich habe versucht, :selectedstatt zu verwenden [selected], aber das hat nicht funktioniert, weil immer etwas ausgewählt ist, auch wenn nichts das Attribut hat


0

Wenn Sie jede Option explizit überprüfen müssen, um festzustellen, ob sie das Attribut "ausgewählt" haben, können Sie dies tun. Andernfalls erhalten option:selectedSie bei Verwendung den Wert für die erste Standardoption.

var viewport_selected = false;      
$('#viewport option').each(function() {
    if ($(this).attr("selected") == "selected") {
        viewport_selected = true;
    }
});
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.