Heim > Web-Frontend > js-Tutorial > Detaillierte Einführung in die jQuery-Auswahloperationsmethode

Detaillierte Einführung in die jQuery-Auswahloperationsmethode

零下一度
Freigeben: 2017-06-19 14:01:39
Original
1174 Leute haben es durchsucht

jquery Den durch Auswählen ausgewählten Text und Wert abrufen:
Syntaxerklärung:

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

jQuery Den durch Auswählen ausgewählten Text und Wert festlegen:
Syntaxerklärung:

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

jQuery fügt das Optionselement von Select hinzu/entfernt:
Syntaxerklärung:

1. $("#select_id").append("<option value=&#39;Value&#39;>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>"); //为Select插入一个Option(第一个位置) 3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 4. $("#select_id option[index=&#39;0&#39;]").remove(); //删除Select中索引值为0的Option(第一个) 5. $("#select_id option[value=&#39;3&#39;]").remove(); //删除Select中Value=&#39;3&#39;的Option 5. $("#select_id option[text=&#39;4&#39;]").remove(); //删除Select中Text=&#39;4&#39;的Option
Nach dem Login kopieren
//遍历option和添加、移除option function changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }); }else{ $("<option value=&#39;111&#39;>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]")); } }
//取得下拉选单的选取值 $(#testSelect option:selected&#39;).text(); 或$("#testSelect").find(&#39;option:selected&#39;).text(); 或$("#testSelect").val();
Nach dem Login kopieren
1, drop- Down-Box:


var cc1 = $(".formc select[@name=&#39;country&#39;] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格) 
var cc2 = $(&#39;.formc select[@name="country"]&#39;).val(); //得到下拉菜单的选中项的值 
var cc3 = $(&#39;.formc select[@name="country"]&#39;).attr("id"); //得到下拉菜单的选中项的ID属性值 $("#select").empty();//清空下拉框//$("#select").html(&#39;&#39;); $("<option value=&#39;1&#39;>1111</option>").appendTo("#select")//添加下拉框的option
Nach dem Login kopieren
Erklärung:

1.select[@name='country'] option[@selected] stellt ein ausgewähltes Element mit einem Namensattribut dar,
und das Der Attributwert ist „Land“. Es gibt ein Optionselement mit einem ausgewählten Attribut darin. Es ist ersichtlich, dass alles, was mit @ beginnt, bedeutet, dass ihm ein Attribut folgt.

2, Optionsfeld:


3,
 $("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格) 
$("input[@type=radio][@value=2]").attr("checked",&#39;checked&#39;); //设置单选框value=2的为选中状态.(注意中间没有空格)
Nach dem Login kopieren
Kontrollkästchen

:

natürlich jquery Der Selektor ist leistungsstark. Es gibt viele Methoden.
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值 $("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出 alert($(this).val()); });
$("#chk1").attr("checked",&#39;&#39;);//不打勾 $("#chk2").attr("checked",true);//打勾 if($("#chk1").attr(&#39;checked&#39;)==undefined){} //判断是否已经打勾
Nach dem Login kopieren


Den Text des ausgewählten Elements abrufen
<script src="jquery-1.2.1.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#selectTest").change(function() { //alert("Hello"); //alert($("#selectTest").attr("name")); //$("a").attr("href","xx.html"); //window.location.href="xx.html"; //alert($("#selectTest").val()); alert($("#selectTest option[@selected]").text()); $("#selectTest").attr("value", "2");
}); }); </script> <a href="#">aaass</a>
<!--下拉框--> <select id="selectTest" name="selectTest"> <option value="1">11</option> <option value="2">22</option> <option value="3">33</option> <option value="4">44</option> <option value="5">55</option> <option value="6">66</option> </select>  
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值 var item = $(&#39;input[@name=items][@checked]&#39;).val();
Nach dem Login kopieren


Den Wert abrufen:
 var item = $("select[@name=items] option[@selected]").text(); 
select下拉框的第二个元素为当前选中值 $(&#39;#select_id&#39;)[0].selectedIndex = 1; 
radio单选组的第二个元素为当前选中值 
$(&#39;input[@name=items]&#39;).get(1).checked = true;
Nach dem Login kopieren
Textfeld, Text Bereich: $("#txt").attr("value");

Mehrfachauswahlfeld-Kontrollkästchen: $("#checkbox_id").attr("value"); "input[@type=radio][@checked]").val();
Dropdown-Feld auswählen: $('#sel').val();
Kontrollformularelement:
Textfeld, Textbereich: $("#txt").attr("value",'');//Inhalt löschen
$("#txt").attr("value",'11') ; //Inhalt füllen
Kontrollkästchen für mehrere Auswahlfelder: $("#chk1").attr("checked",'');//Unchecked
$("#chk2").attr("checked", true);//Tick
if($("#chk1").attr('checked')==undefined) //Beurteilen Sie, ob es überprüft wurde
Radio Group Radio: $( "input[@ type=radio]").attr("checked",'2');//Legen Sie das Element mit Wert=2 als aktuell ausgewähltes Element fest
Dropdown-Feld auswählen: $("#sel").attr ("value",'-sel3');//Legen Sie das Element mit value=-sel3 als aktuell ausgewähltes Element fest
$("1111 2222").appendTo("#sel")//Option des Dropdown-Feldes hinzufügen
$("#sel").empty(); //Löschen Dropdown-Feld

Den Wert einer Reihe von per Funk ausgewählten Elementen abrufen
var item = $('input[@name=items][@checked]').val(); Holen Sie sich den Text des ausgewählten Elements

var item = $("select[@name=items] option[@selected]").text();

Das zweite Element des Auswahl-Dropdown-Felds ist das aktuell ausgewählter Wert
$('#select_id') [0].selectedIndex = 1;
Das zweite Element der Radio-Radio-Auswahlgruppe ist der aktuell ausgewählte Wert
$('input[@name=items ]').get(1).checked = true;
Wert abrufen:
Textfeld, Textbereich: $("#txt").attr("value");
Kontrollkästchen für Mehrfachauswahl : $("#checkbox_id").attr("value" );
Radio-Auswahlgruppe radio: $("input[@type=radio][@checked]").val(); Abwärtsfeldauswahl: $('#sel').val();
Steuerelementformularelemente:
Textfeld, Textbereich: $("#txt").attr("value",''); //Inhalt löschen
$("#txt").attr ("value",'11');//Inhalt füllen
Kontrollkästchen für Mehrfachauswahlfelder: $("#chk1").attr("checked ",'');//Unchecked
$( "#chk2").attr("checked",true);//Check
if($("#chk1").attr('checked' )==undefiniert) //Bestimmen Sie, ob es überprüft wurde
Radioauswahlgruppe radio: $("input[@type=radio]").attr("checked",'2');//Legen Sie das Element fest mit Wert=2 als aktuell ausgewähltes Element
Dropdown-Feld auswählen:

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die jQuery-Auswahloperationsmethode. 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