分别使用javascript原生的方法和jquery方法
创新互联专注于企业营销型网站、网站重做改版、改则网站定制设计、自适应品牌网站建设、H5网站设计、商城开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为改则等各大城市提供网站开发制作服务。
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()); //拿到选中项的文本
参考以下两种方法:
设置option的selected属性为true
设置select标签的value值为需要选中的值
实例演示如下:
1、根据演示需要,给出一个示例HTML结构
select id="test"
option value="1"option-1/option
option value="2"option-2/option
option value="3"option-3/option
/selectbr
input type="button" id="btn1" value="设置option-2选中"
input type="button" id="btn2" value="设置value=3的项选中"
2、jquery代码
$(function(){
// 方法1:设置option的selected属性为true
$("#btn1").click(function() { // 第一个按钮单击事件
$("select option").each(function() { // 遍历所有option,如果option内容为option-2,就设置起selected属性为true
if($(this).text()=="option-2")
$(this).prop("selected",true);
});
});
// 方法2:设置select标签的value值为需要选中的值
$("#btn2").click(function() { // 第二个按钮的单击事件
$("select").val("3"); // 设置option值为3的选项选中
});
});
3、效果演示
参考如下代码
$("select").val(); // 选中项目的value值
$("select option:checked").text(); // 选中项目的显示值
示例如下:
1.创建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="点击查看被选项目"
2.编写jquery代码
$(function(){
$("input").click(function() {
a = $("#sel").val();
b = $("#sel option:checked").text();
alert("被选项目的值:"+a+",被选项目的显示值:"+b+"。");
});
})
3.显示效果