
获取select选中的 value: $("#ddlregtype ")val();//这样就OK了 获取select 选中的 text :$("#ddlregtype")find("option:selected")text(); 获取select选中的索引: $("#ddlregtype ")get(0)selectedindex;这三个对你以后应该有用的
1、获取选中select的value和text,html代码如下:
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
则可通过以下script代码s来获取选中的value和text
$("#mySelect")val(); //获取选中记录的value值
$("#mySelect option:selected")text(); //获取选中记录的text值
2、运用new Option("文本","值")方法添加选项option
var obj = documentgetElementById("mySelect");
objadd(new Option("4","4"));
3、删除所有选项option
var obj = documentgetElementById("mySelect");
objoptionslength = 0;
4、删除选中选项option
var obj = documentgetElementById("mySelect");
var index = objselectedIndex;
objoptionsremove(index);
5、修改选中选项option
var obj = documentgetElementById("mySelect");
var index = objselectedIndex;
objoptions[index] = new Option("three",3); //更改对应的值
objoptions[index]selected = true; //保持选中状态
6、删除select
var obj = documentgetElementById("mySelect");
objparentNoderemoveChild(obj); //移除当前对象
7、select选择的响应事件
$("#mySelect")change(function(){
//添加所需要执行的 *** 作代码
})
1js
var
obj=documentgetElementById(selectid);
objoptionslength
=
0;
//清除所有内容
objoptions[index]
=
new
Option("three",3);
//更改对应的值
objoptions[index]selected
=
true;
//保持选中状态
objadd(new
Option("4","4"));
”文本",”值"
var
index
=
objselectedIndex;objoptionsremove(index);//删除选中项
2jquery
$("#select_id")append("<option
value='Value'>Text</option>");
//为Select追加一个Option(下拉项)
$("#select_id")")find('option:selected')text();
获取select选中的text
$("#select_id")val();
获取select选中的value
$("#select_id
option[index='0']")remove();//删除索引值为0的Option
$("#select_id
option[value='3']")remove();
//删除值为3的Option
$("#select_id
option[text='4']")remove();
//删除TEXT值为4的Option
$("#mselect_id")change(function(){
//添加所需要执行的 *** 作代码
})
补充:
js获取select标签选中的值
var
obj
=
documentgetElementByIdx_x(”testSelect”);
//定位id
var
index
=
objselectedIndex;
//
选中索引
var
text
=
objoptions[index]text;
//
选中文本
var
value
=
objoptions[index]value;
//
选中值
jQuery中获得选中select值
第一种方式
$('#testSelect
option:selected')text();//选中的文本
$('#testSelect
option:selected')
val();//选中的值
$("#testSelect
")get(0)selectedIndex;//索引
第二种方式
$("#tesetSelect")find("option:selected")text();//选中的文本
……val();
……get(0)selectedIndex;
以上内容是小编给大家介绍的JS、jQuery中select的用法详解,希望对大家有所帮助!
1、checkbox日常jquery *** 作。
现在我们以下面的html为例进行checkbox的 *** 作。
<input id="checkAll" type="checkbox" />全选
<input name="subBox" type="checkbox" />项1
<input name="subBox" type="checkbox" />项2
<input name="subBox" type="checkbox" />项3
<input name="subBox" type="checkbox" />项4
全选和全部选代码:
<script type="text/javascript">
$(function() {
$("#checkAll")click(function() {
$('input[name="subBox"]')attr("checked",thischecked);
});
var $subBox = $("input[name='subBox']");
$subBoxclick(function(){
$("#checkAll")attr("checked",$subBoxlength == $("input[name='subBox']:checked")length true : false);
});
});
</script>
checkbox属性:
var val = $("#checkAll")val();// 获取指定id的复选框的值
var isSelected = $("#checkAll")attr("checked"); // 判断id=checkAll的那个复选框是否处于选中状态,选中则isSelected=true;否则isSelected=false;
$("#checkAll")attr("checked", true);// or
$("#checkAll")attr("checked", 'checked');// 将id=checkbox_id3的那个复选框选中,即打勾
$("#checkAll")attr("checked", false);// or
$("#checkAll")attr("checked", '');// 将id=checkbox_id3的那个复选框不选中,即不打勾
$("input[name=subBox][value=3]")attr("checked", 'checked');// 将name=subBox, value=3 的那个复选框选中,即打勾
$("input[name=subBox][value=3]")attr("checked", '');// 将name=subBox, value=3 的那个复选框不选中,即不打勾
$("input[type=checkbox][name=subBox]")get(2)checked = true;// 设置index = 2,即第三项为选中状态
$("input[type=checkbox]:checked")each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值
alert($(this)val());
});
2、radio的jquery日常 *** 作及属性
我们仍然以下面的html为例:
<input type="radio" name="radio" id="radio1" value="1" />1
<input type="radio" name="radio" id="radio2" value="2" />2
<input type="radio" name="radio" id="radio3" value="3" />3
<input type="radio" name="radio" id="radio4" value="4" />4
radio *** 作如下:
$("input[name=radio]:eq(0)")attr("checked",'checked'); //这样就是第一个选中咯。
//jquery中,radio的选中与否和checkbox是一样的。
$("#radio1")attr("checked","checked");
$("#radio1")removeAttr("checked");
$("input[type='radio'][name='radio']:checked")length == 0 "没有任何单选框被选中" : "已经有选中";
$('input[type="radio"][name="radio"]:checked')val(); // 获取一组radio被选中项的值
$("input[type='radio'][name='radio'][value='2']")attr("checked", "checked");// 设置value = 2的一项为选中
$("#radio2")attr("checked", "checked"); // 设置id=radio2的一项为选中
$("input[type='radio'][name='radio']")get(1)checked = true; // 设置index = 1,即第二项为当前选中
var isChecked = $("#radio2")attr("checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;
var isChecked = $("input[type='radio'][name='radio'][value='2']")attr("checked");// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;
3、select下拉框的日常jquery *** 作
select *** 作相比checkbox和radio要相对麻烦一些,我们仍然以下面的html为例来说明:
<select name="select" id="select_id" style="width: 100px;">
<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>
看select的如下属性:
$("#select_id")change(function(){ // 1为Select添加事件,当选择其中一项时触发
//code
});
var checkValue = $("#select_id")val(); // 2获取Select选中项的Value
var checkText = $("#select_id :selected")text(); // 3获取Select选中项的Text
var checkIndex = $("#select_id")attr("selectedIndex"); // 4获取Select选中项的索引值,或者:$("#select_id")get(0)selectedIndex;
var maxIndex =$("#select_id :last")get(0)index; // 5获取Select最大的索引值
/
jQuery设置Select的选中项
/
$("#select_id")get(0)selectedIndex = 1; // 1设置Select索引值为1的项选中
$("#select_id")val(4); // 2设置Select的Value值为4的项选中
/
jQuery添加/删除Select的Option项
/
$("#select_id")append("<option value='新增'>新增option</option>"); // 1为Select追加一个Option(下拉项)
$("#select_id")prepend("<option value='请选择'>请选择</option>"); // 2为Select插入一个Option(第一个位置)
$("#select_id")get(0)remove(1); // 3删除Select中索引值为1的Option(第二个)
$("#select_id :last")remove(); // 4删除Select中索引值最大Option(最后一个)
$("#select_id [value='3']")remove(); // 5删除Select中Value='3'的Option
$("#select_id")empty();
$("#select_id")find("option:selected")text(); // 获取select 选中的 text :
$("#select_id")val(); // 获取select选中的 value:
$("#select_id")get(0)selectedIndex; // 获取select选中的索引:
//设置select 选中的value:
$("#select_id")attr("value","Normal");
$("#select_id")val("Normal");
$("#select_id")get(0)value = value;
//设置select 选中的text,通常可以在select回填中使用
var numId=33 //设置text==33的选中!
var count=$("#select_id option")length;
for(var i=0;i<count;i++)
{ if($("#select_id")get(0)options[i]text == numId)
{
$("#select_id")get(0)options[i]selected = true;
break;
}
}
通过上面的总结,应该对jquery的checkbox,radio和select有了一定的了解了吧,温故而知新,用多了就会变的熟练起来,即使有时候忘记了,也可以来翻一翻!
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:indexhtml,并引入jquery。
2、在indexhtml中的<script>标签,输入jquery代码:
$('select option')each(function (i) {
if ($(this)attr('selected')) {
$('body')append(i);
}
});
3、浏览器运行indexhtml页面,此时用jquery获取到了option的索引值被打印了出来。
windowonload = function(){
//首先获得下拉框的节点对象;
var obj = documentgetElementById("obj");
//1如何获得当前选中的值?:
var value = objvalue;
//2如何获得该下拉框所有的option的节点对象
var options = objoptions; //注意:得到的options是一个对象数组
//3如何获得第几个option的value值比如我要获取第一option的value,可以这样:
var value1 =options[0]value;
//4如何获得第几个option的文本内容比如我要获取第一option的文本,可以这样:
var text1 = options[0]text;
//5如何获得当前选中的option的索引?
var index = objselectedIndex;
//6如何获得当前选中的option的文本内容?
//从第2个问题,我们已经获得所有的option的对象数组options了。又从第5个问题,我们获取到了当前选中的option的索引值 //所以我们只要同options[index]下标的方法得到当前选中的option了
var selectedText =options[index]text;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-180minjs"></script>
<script type="text/javascript">
$ (function ()
{
$ (":button")click (function ()
{
alert ($ ('select option[value="' + $ (":text")val () + '"]')index ());
});
});
</script>
</head>
<body>
<select>
<option value="1">11</option>
<option value="2">11</option>
<option value="3">11</option>
<option value="4">11</option>
<option value="5">11</option>
<option value="6">11</option>
</select> value:
<input type="text" />
<button>getIndex</button>
</body>
</html>
按照你的写法,HTML结构可能如下:
<select name='sel'><option index='1'>百度</option><option index='2'>新浪</option></select>
attr("index")是jquer获取元素属性的方法,这里的index是元素的属性名称,那么上面的HTML结构获取的也就是2
但是我觉得你弄错了,jQuery获取select的最大索引值应该是这样
var maxindex=$("select[name='sel']")find("option:last")index();
以上就是关于怎么获取选中的select的值,不是value的值 是显示的值全部的内容,包括:怎么获取选中的select的值,不是value的值 是显示的值、js 获取select对象、JS、jQuery中select的用法详解等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)