Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung der Methoden zur Steuerung des jQuery-Auswahlvorgangs

巴扎黑
Freigeben: 2017-06-29 10:07:37
Original
1181 Leute haben es durchsucht

Es ist zu beachten, dass ein Großteil des Codes hier für Versionen vor jquery 1.32 ist (spätere Versionen unterstützen @ nicht mehr), also ersetzen Sie ihn einfach durch leeren Code und testen Sie ihn.

jQuery ruft den durch Auswählen ausgewählten Text und Wert ab:
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 legt den ausgewählten Text und Wert fest by Select:
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

/////////////////////////////////// //// ///////////////////////////
Wenn Sie ein schlechtes Gedächtnis haben, können Sie es speichern:
1, Dropdown-Feld:

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

Eine kleine Erklärung:
1.select[@name='country'] option[@selected] bedeutet, dass es das hat Namensattribut,
und der Attributwert ist „Land“. Das Optionselement mit dem ausgewählten Attribut im Auswahlelement. Es ist ersichtlich, dass, wenn es mit @ beginnt, ein Attribut folgt.

2, Optionsfeld:
$("input[@type=radio][@checked]").val(); //Den Wert des ausgewählten Elements des Optionsfelds abrufen (Hinweis die Mitte Keine Leerzeichen)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //Setzen Sie den Optionsfeldwert=2 auf den ausgewählten Wert Zustand. (Beachten Sie, dass in der Mitte kein Leerzeichen steht)

3,
Checkbox: $("input[@type=checkbox][@checked]").val (); // Den Wert des ersten ausgewählten Elements im Kontrollkästchen abrufen
$("input[@type=checkbox][@checked]").each(function(){ //Da Kontrollkästchen im Allgemeinen mehrere auswählen, Sie können also
alert($(this).val());

$("#chk1").attr("checked",'') schleifen und ausgeben. ; //Häkchen aufheben
$("#chk2").attr("checked",true);//Häkchen machen
if($("#chk1").attr('checked')== undefiniert) {} //Beurteilen Sie, ob es überprüft wurde


Natürlich ist der Selektor von jquery leistungsstark


<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>
Nach dem Login kopieren

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("1111 2222").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zur Steuerung des jQuery-Auswahlvorgangs. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!