有时候我们需要在一个select中传递两个有关联但不同的值,比如你的这个情况。这时候要利用到option的另一个不常用属性name,用name来存储第二个值,然后在onchange事件中分别用thisoptions[thisselectedindex]name来调用这个值。
全12333
全12321
全123123
在你的程序里,把
之间的内容作为name属性写出来,然后定义一个隐藏的input——optt,再定义好onchange事件,就可以同时获取到value和name两个值了。
分别使用javascript原生的方法和jquery方法
<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
code:
一:javascript原生的方法
1:拿到select对象: var myselect=documentgetElementById("test");
2:拿到选中项的索引:var index=myselectselectedIndex ; // selectedIndex代表的是所选中项的index
3:拿到选中项options的value: myselectoptions[index]value;
4:拿到选中项options的text: myselectoptions[index]text;
二:jquery方法(前提是已经加载了jquery库)
1:var options=$("#test option:selected"); //获取选中的项
2:alert(optionsval()); //拿到选中项的值
3:alert(optionstext()); //拿到选中项的文本
分太少了!~(发泄一下)
把第一个select 的值放到一个临时变量,或者requestsetAttribute("s1",select选中的值),
则第二个select 的查询语句就可以在 where 条件中加上 列名=requestgetAttribute("s1")
AJAX实现最好,否则普通的写在JSP里,会不断的刷新页面,不断读取数据库信息。
如果select标签是有id属性的,如
<select
id=xx>
则用下述方法获取当前选项的值:
var
v
=
xxvalue;
或
var
v
=
documentgetElementById("xx")value;
//此方法兼容性好
如果select标签是有name属性的,如
<form
name=form1>
<select
name=xx>
则用下述方法获取当前选项的值:
var
v
=
form1xxvalue;
或
var
v
=
documentgetElementsByName("xx")[0]value;
如果同一页面含有多个name属性相同的标签,则上述[0]中的数字要改为相应的物理顺序号(从0起算)
如果select标签不含有任何可供定位的属性,如
<select>
则用下述方法获取当前选项的值:
var
v
=
documentgetElementsByTagName("select")[0]value;
如果同一页面含有多个select标签,则上述[0]中的数字要改为相应的物理顺序号(从0起算)
样例代码如下:
<html><head>
<title>知道</title>
<meta ;
希望对你有帮助。
<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>
应该是你所要的,试试看吧,亲!
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为索引值
以上就是关于如何获取select的option的value值全部的内容,包括:如何获取select的option的value值、如何获取select下拉框的值、同一个jsp页面如何第2个下拉列表框获取第一个下拉列表框从数据库返回选中的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)