Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie bediene ich Select mit JQuery?

青灯夜游
Freigeben: 2019-11-23 17:37:32
nach vorne
1847 Leute haben es durchsucht

Wie bediene ich Select mit JQuery? Im folgenden Artikel erfahren Sie, wie Sie mit jquery select bedienen (Wert abrufen, Auswahl festlegen). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Wie bediene ich Select mit JQuery?

1. Grundwertprobleme

Zum Beispiel<select class="selector"></select>

1 das Element

$(".selector").val("pxx");
Nach dem Login kopieren

2. Wählen Sie das Element aus, dessen Text auf pxx eingestellt ist. Hinweis

: Die vorherige Schreibweise

war derzeit falsch habe bestätigt, dass die Eingabe dies unterstützt. Eine Möglichkeit, den Attributwert zu erhalten: „“, Sie benötigen „“, um ihn in „select“ zu bekommen. $(".selector").find("option[text=&#39;pxx&#39;]").attr("selected",true);input[text=&#39;pxx&#39;]Hier werden eckige Klammern verwendet. Dem Gleichheitszeichen in den eckigen Klammern wird der Attributname ohne Anführungszeichen vorangestellt. Oftmals kann die Verwendung von eckigen Klammern die Logik sehr vereinfachen. option:contains(&#39;pxx&#39;)

3. Den Wert des aktuell ausgewählten Elements abrufen

$(".selector").find("option:contains(&#39;pxx&#39;)").attr("selected",true);
Nach dem Login kopieren

4. Den Text des aktuell ausgewählten Elements abrufen

$(".selector").val();
Nach dem Login kopieren

Der Doppelpunkt wird hier verwendet Es wird auch hilfreich sein, Rückschlüsse auf andere Fälle zu ziehen. Der Code wird prägnanter.

2. Die Kaskade von

select

wird häufig verwendet, das heißt, der Wert des zweiten Select ändert sich mit dem Wert, der vom ersten Select ausgewählt wurde. Dies ist in jquery sehr einfach.

Wie zum Beispiel:

$(".selector").find("option:selected").text();
Nach dem Login kopieren

3. jQuery ruft den durch Auswählen ausgewählten Text und Wert ab:

Grammatikerklärung:

$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中,这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});
Nach dem Login kopieren

4. jQuery legt den Text und den Wert von Select fest:

Grammatikerklärung:

$("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值
Nach dem Login kopieren

5. jQuery fügt das Optionselement von Select hinzu/entfernt es :

Grammatikerklärung:

$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   // 设置Select的Value值为4的项选中
$("#select_id option[text=&#39;jQuery&#39;]").attr("selected", true);   //设置Select的Text值为jQuery的项选中
Nach dem Login kopieren

6. jquery-Radiowert, Kontrollkästchenwert, Auswahlwert, Optionsauswahl, Kontrollkästchenauswahl, Auswahlauswahl und zugehöriges

1 Den Wert einer Reihe von per Funk ausgewählten Elementen abrufen

$("#select_id").append("<option value=&#39;Value&#39;>Text</option>");  //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>");  //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
$("#select_id option[index=&#39;0&#39;]").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value=&#39;3&#39;]").remove();  //删除Select中Value=&#39;3&#39;的Option
$("#select_id option[text=&#39;4&#39;]").remove();  //删除Select中Text=&#39;4&#39;的Option
Nach dem Login kopieren

2 Den Text des ausgewählten Elements abrufen

var item = $(&#39;input[name=items][checked]&#39;).val();
Nach dem Login kopieren

3 Das zweite Element des Auswahl-Dropdown-Felds ist aktuell ausgewählter Wert

var item = $("select[name=items] option[selected]").text();
Nach dem Login kopieren

4 Das zweite Element der Radio-Radiogruppe ist der aktuell ausgewählte Wert

$(&#39;#select_id&#39;)[0].selectedIndex = 1;
Nach dem Login kopieren

7. Holen Sie sich den Wert

:

Text Feld, Textbereich:

Mehrfachauswahlfeld-Kontrollkästchen: $("#txt").attr("value");

Einzelauswahl-Gruppenradio: $("#checkbox_id").attr("value");

Dropdown-Feldauswahl: $("input[type=radio][checked]").val();

$(&#39;#sel&#39;).val(); 8. Kontrollformularelemente:

Textfeld, Textbereich:

$(&#39;input[name=items]&#39;).get(1).checked = true;
Nach dem Login kopieren

Mehrfachauswahlfeld-Kontrollkästchen:

$("#txt").attr("value",&#39;&#39;);//清空内容 
$("#txt").attr("value",&#39;11&#39;);//填充内容
Nach dem Login kopieren

Funkgruppenradio:

$("#chk1").attr("checked",&#39;&#39;);//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr(&#39;checked&#39;)==undefined) //判断是否已经打勾
Nach dem Login kopieren

Dropdown-Feld auswählen:

$("input[type=radio]").attr("checked",&#39;2&#39;);//设置value=2的项目为当前选中项
Nach dem Login kopieren

9. Bestimmen Sie, ob es eine Option für einen Wert in der Auswahl gibt:

$("#sel").attr("value",&#39;-sel3&#39;);//设置value=-sel3的项目为当前选中项 
$("<option value=&#39;1&#39;>1111</option><option value=&#39;2&#39;>2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty();//清空下拉框
Nach dem Login kopieren
Empfohlenes Lernen: jQuery-Tutorial

Das obige ist der detaillierte Inhalt vonWie bediene ich Select mit JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!