Heim > Web-Frontend > js-Tutorial > jquery-Operation Wert auswählen und ausgewählte Instanzanalyse festlegen

jquery-Operation Wert auswählen und ausgewählte Instanzanalyse festlegen

黄舟
Freigeben: 2017-07-28 09:22:22
Original
1534 Leute haben es durchsucht

JQuery-Operation auswählen (Hinzufügen, Löschen, Löschen)

jQueryDen Text abrufen, der durch Auswählen ausgewählt wurde und Wert:

$("#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

jQuery fügt das Optionselement „Auswählen“ hinzu/entfernt:

$("#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;的Optiona 

$("#select_id option[text=&#39;4&#39;]").remove(); //删除Select中Text=&#39;4&#39;的Optiona
Nach dem Login kopieren

Inhalt löschen:

$("#charCity").empty();
Nach dem Login kopieren

Jedes Mal Bei der Bedienung von select müssen Sie immer rausgehen und die Informationen nachschlagen. Fassen Sie sie doch selbst zusammen und schauen Sie später hier nach.

Zum Beispiel

1. Setzen Sie das Element mit dem Wert auf pxx, um

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

2 , Setzen Sie den Text auf pxx und wählen Sie

    $(".selector").find("option[text=&#39;pxx&#39;]").attr("selected",true);
Nach dem Login kopieren

Es 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.

3. Den Wert des aktuell ausgewählten Elements abrufen

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

4. Den Text des aktuell ausgewählten Elements abrufen

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

Der Doppelpunkt wird hier verwendet. Wenn Sie die Verwendung beherrschen und Rückschlüsse aus einem Beispiel ziehen, wird der Code auch einfacher.

Die Kaskade von select wird oft 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.

Zum Beispiel:

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

jQuery ruft den durch Auswählen ausgewählten Text und Wert ab:
Syntaxerklärung:

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

jQuery setzt Select Selected Text and Value:
Syntaxerklä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

jQuery zum Hinzufügen/Löschen des Optionselements von Select:
Syntaxerklärung:

$("#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

jquery radio Value, Kontrollkästchenwert, Wert auswählen, Radio ausgewählt, Kontrollkästchen ausgewählt, ausgewählt auswählen und zugehörig
Den Wert einer Reihe von per Radio ausgewählten Elementen abrufen

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

Rufen Sie den Text des ausgewählten Elements in der Auswahl ab

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

Das zweite Element des Auswahl-Dropdown-Felds ist der aktuell ausgewählte Wert

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

Das zweite Element des Radio-Radiogruppenelements ist der aktuell ausgewählte Wert

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

Wert abrufen:
Textfeld, Textbereich: $("#txt").attr("value" );
Mehrfachauswahl-Kontrollkästchen: $("#checkbox_id").attr("value");
Radioauswahlgruppe radio: $("input[type=radio][checked]").val() ;
Dropdown-Feld auswählen: $('#sel').val();
Steuerelement-Formularelemente:
Textfeld, Textbereich:

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

Mehrfachauswahlfeld Kontrollkästchen:

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

Radioauswahlgruppe Radio:

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

Dropdown-Box auswählen:

$("#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

Das obige ist der detaillierte Inhalt vonjquery-Operation Wert auswählen und ausgewählte Instanzanalyse festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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