重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
分别使用javascript原生的方法和jquery方法
网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了兴县免费建站欢迎大家使用!
select id="test" name=""
option value="1"text1/option
option value="2"text2/option
/select
code:
一:javascript原生的方法
1:拿到select对象: var myselect=document.getElementById("test");
2:拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value: myselect.options[index].value;
4:拿到选中项options的text: myselect.options[index].text;
二:jquery方法(前提是已经加载了jquery库)
1:var options=$("#test option:selected"); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:alert(options.text()); //拿到选中项的文本
select id="selects"
option value="0" selected1/option
option value="1"1/option
option value="2"2/option
/select
div id="result"/div
--------------------------------------------------------
$("#selects").change(function(){ //下拉框改变时取得值
$("#result").html($(this).val()); //显示值
});
这要分两种情况,一种是下拉框有ID或Name属性:
var v=$("#selectid option:selected").val();
如果下拉框没有ID或Name属性:
$("tr").find("select option:selected").val()
思路:jquery 获取select多选下拉框所有选项的值,可以通过选取多选的数组进行循环判断即可。
方法如下:
function f(){
var se = document.getElementById("t");
var s = [];
for(i=0;ise.length;i++){
if(se.options[i].selected){
s.push(se[i].value);
}
}
alert(s);
}
select id="t" multiple="true"
option value="a"option-A/option
option value="b"option-B/option
option value="c"option-C/option
option value="d"option-D/option
/select
input type="button" value="确定" onclick="f()" /
如图所示:
参考如下代码
$("select").val(); // 选中项目的value值
$("select option:checked").text(); // 选中项目的显示值
示例如下:
创建Html元素
请选择:
select id="sel"
option value="1"选项1/option
option value="2"选项2/option
option value="3"选项3/option
option value="4"选项4/option
/select
input type="button" value="点击查看被选项目"
编写jquery代码
$(function(){
$("input").click(function() {
a = $("#sel").val();
b = $("#sel option:checked").text();
alert("被选项目的值:"+a+",被选项目的显示值:"+b+"。");
});
})
显示效果
1、首先我们打开软件进入代码编辑按照图示代码先创建一个下拉框。
2、要运行后网页界面如此显示下拉框。
3、接下来我们按照图示代码用js来获取被选中的值。
4、首先我们通过selectedIndex来获得被选中的下标,再通过下标来获得值。
5、当然,如果你是用jquery的话可以按照图示代码进行设置依然可以获得下拉框的值。