var obj = documentgetElementById("n1"); // 这里也可以写成var obj = documentgetElementByName("n1");var arrText = new Array();var arrValue = new Array();
for(var i = 0; i < objoptionslength; i++) {
arrText [arrText length] = objoptions[i]text; arrValue[arrValuelength] = objoptions[i]value;
}arrText 就是所有的TextarrValue就是所有的Value
在HTML页面中,获取当前select元素中所选中的那个值和显示值。
<tr>
<th scope="row" width="15%" nowrap >目标字段</th>
<td><select name="idMbzd" style="width:25%" onchang=”on_idmbzd_change();”>
<option value=”1”>eg1</option>
<option value=”2”>eg2</option>
<option value=”3”>eg2</option>
</select>
</td>
</tr>
<script>
function on_idmbzd_change(){
var sel_obj = documentgetElementByIdx("idMbzd ");
var index = sel_objselectedIndex;
alert(sel_objoptions[index]value);
alert(sel_objoptions[index]text);
}
</script>
设置select元素的选中项:
通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果。
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >
扩展资料超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。
HTML标签的大小写无关的,例如“主体”<body>跟<BODY>表示的意思是一样的,推荐使用小写。
参考资料来源:百度百科-HTMLJquery获取select选中项 自定义属性的值的方法:
示例代码:
1、html代码:
<!DOCTYPE>
<html>
<head>
<meta >
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<select id="mysel" title="选择提示">
<option>nba</option>
<option>fifa</option>
</select>
<script>
</script>
</body>
<html>
2、jquery代码获取自定义属性:
使用attr(name)获取title值:
<script>
alert($("#mysel")attr("title"));
</script>
3、显示结果:
思路:获取select对象→使用value属性获取select对象的选中值→获取text对象→利用value属性设置text的值。实例演示如下:
1、HTML结构
<input type="text" id="txt"><br><select id="test">
<option value="option-1">option-1</option>
<option value="option-2">option-2</option>
<option value="option-3">option-3</option>
</select>
2、javascript代码
windowonload = function(){documentgetElementById("test")onchange = function(){
documentgetElementById("txt")value = thisvalue;
}
}
3、效果演示
jQuery获取Select元素,并设置的 Text和Value:
$("#select_id ")get(0)selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id ")val(4); // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']")attr("selected", true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select元素的Option项:
$("#select_id")append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id")prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last")remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']")remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']")remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']")remove(); //删除Select中Text='4'的Option
三级分类 <select name="thirdLevel" id="thirdLevel"
onchange="getFourthLevel()">
<option value="0" id="thirdOption">
请选择三级分类
</option>
</select>
</div>
四级分类:
<select name="fourthLevelId" id="fourthLevelId">
<option value="0" id="fourthOption">
请选择四级分类
</option>
</select>
</div>
if($("#thirdLevel")val()!=0){
$("#thirdLevel option[value!=0]")remove();
}
if($("#fourthLevelId")val()!=0){
$("#fourthLevelId option[value!=0]")remove();
}//这个表示:假如希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。
获取Select :
获取select 选中的 text :
$("#ddlRegType")find("option:selected")text();
获取select选中的 value:
$("#ddlRegType ")val();
获取select选中的索引:
$("#ddlRegType ")get(0)selectedIndex;
设置select:
设置select 选中的索引:
$("#ddlRegType ")get(0)selectedIndex=index;//index为索引值
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>
<script language="javascript" src="jquery-141minjs"></script>
<script language="javascript">
$(function(){
$("#main_1 inputsubmit")click(function(){
var _d1=$("#main_1 selectdate")val(),
_t1=$("#main_1 inputtime")val();
alert(_d1+"\n"+_t1)
})
$("#main_2 inputsubmit")click(function(){
var _d2=$("#main_2 selectdate")val(),
_t2=$("#main_2 inputtime")val();
alert(_d2+"\n"+_t2)
})
})
</script>
<div id="main_1">
第一时间:
<select class='date'>
<option value='1'>第一天</option>
<option value='2'>第二天</option>
<option value='3'>第三天</option>
<option value='4'>第四天</option>
<option value='5'>第五天</option>
</select>
<input type="text" name="time" class='time'>
<input type="submit" class='submit' value="提交" >
</div>
<div id="main_2">
第二时间:
<select class='date'>
<option value='1'>第一天</option>
<option value='2'>第二天</option>
<option value='3'>第三天</option>
<option value='4'>第四天</option>
<option value='5'>第五天</option>
</select>
<input type="text" name="time" class='time'>
<input type="submit" class='submit' value="提交">
</div>
</html>
应该是你所要的,试试看吧,亲!
以上就是关于通过js来获取select的全部值全部的内容,包括:通过js来获取select的全部值、如何获取和设置HTML文档中select元素的选中项、Jquery怎么获取select选中项 自定义属性的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)