Home > Web Front-end > JS Tutorial > jquery operation drop-down list, text box, check box, radio button collection (collection)_javascript skills

jquery operation drop-down list, text box, check box, radio button collection (collection)_javascript skills

WBOY
Release: 2016-05-16 17:04:53
Original
922 people have browsed it

各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法。
遍历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{
  $("").appendTo($("select[@name=ISHIPTYPE]"));
 }
}
//取得下拉选单的选取值
$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//////////////////////////////////////////////////////////////////
记性不好的可以收藏下:

1,下拉框:

var cc1   = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("").appendTo("#select")//添加下拉框的option

稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val();   //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
   alert($(this).val());
   });

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾


当然jquery的选择器是强大的. 还有很多方法.


aaass



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();

Control form elements:
Text box, text area: $("#txt").attr("value",'');//Clear content
                                                                                                                                           #txt").attr("value",'11');//Fill content

Multiple selection box checkbox: $("#chk1").attr("checked",'');//Unchecked
                                                                                                      ;//Tick
if($("#chk1").attr('checked')==undefined) //Judge whether it has been checked

Radio group radio: $("input[@type=radio]").attr("checked",'2');//Set the item with value=2 as the currently selected item

Drop-down box select: $("#sel").attr("value",'-sel3');//Set the item with value=-sel3 as the currently selected item
                 $("1111 2222").appendTo("#sel")//Add the option
of the drop-down box $("#sel" ).empty(); //Clear the drop-down box

Get the value of a set of radio selected items
var item = $('input[@name=items][@checked]').val();
Get the text of the selected item
var item = $("select[@name=items] option[@selected]").text();
The second element of the select drop-down box is the currently selected value
$('#select_id ')[0].selectedIndex = 1;
The second element of the radio radio selection group is the currently selected value
$('input[@name=items]').get(1).checked = true ;

Get value:
Text box, text area: $("#txt").attr("value");

Multiple selection box checkbox: $("#checkbox_id").attr("value");

Radio selection group radio: $("input[@type=radio][@checked]").val();

Drop-down box select: $('#sel').val();

Control form elements:
Text box, text area: $("#txt").attr("value",'');//Clear content
$(" #txt").attr("value",'11');//Fill content

Multiple selection box checkbox: $("#chk1").attr("checked",'');//Unchecked
$("#chk2").attr("checked",true) ;//Check
if($("#chk1").attr('checked')==undefined) //Judge whether it has been checked

Radio group radio: $("input[@type=radio]").attr("checked",'2');//Set the item with value=2 as the currently selected item

Drop-down box select: $("#sel").attr("value",'-sel3');//Set the item with value=-sel3 as the currently selected item
$("").appendTo("#sel")//Add the option of the drop-down box
$("# sel").empty();//Clear the drop-down box

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template