用js获取select的多个选项值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js获取select的多个选项值相关的知识，希望对你有一定的参考价值。
下面通过两种方式使用js来进行获取select具体代码如下:
var
obj = document.getElementByIdx_x(”testSelect”);
定位idvar index =
obj.selectedIndex;
选中索引var text = obj.options[index].text;
选中文本var
value = obj.options[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; 参考技术A var select = document.getElementById("selectid");
select.options[0].value; 0、1、2、3
select.options[0].innerText;
select.innerText; 全部追问
要是我想将一个下拉框中的多项选项值同时添加到另一个下拉框中呢，这个该怎么做。。。
本回答被提问者采纳怎么用js动态 设置select中的某个值为选中值
select 中的某个options为新建，但在子页面新建一个选项时怎么能提交新页面后 在父页面的select中选中新建的选项
我们使用javascript实现js动态设置select中的某个值为选中值，操作如下：
使用javascript实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select name="jumpMenu" id="jumpMenu" onChange="jumpMenu('parent',this,0)">
<option id="1" value="跳转URL">111</option> // 111 是显示给用户的信息
<option id="2" value="跳转URL">222</option>
<option id="3" value="跳转URL">333</option>
<option id="4" value="跳转URL">444</option>
<option id="5" value="跳转URL">555</option>
</select>
<script type="text/javascript">
function display(optionID)
var all_options = document.getElementById("jumpMenu").options;
for (i=0; i<all_options.length; i++)
if (all_options[i].id == optionID) // 根据option标签的ID来进行判断 测试的代码这里是两个等号
all_options[i].selected = true;
;
display("4");
</script>
</body>
</html>
扩展资料：
Js获得元素标签名称的方法：
1、$( this ).get(0).tagName
2、$( this )[0].tagName
3、$( this ).prop("tagName")
4、$( this ).prop("nodeName")
用JS动态设置select的方法如下：
手动通过原生JS来实现：
/**
* 设置select控件选中
* @param selectId select的id值
* @param checkValue 选中option的值
*/
function set_select_checked(selectId, checkValue)
var select = document.getElementById(selectId);
for (var i = 0; i < select.options.length; i++)
if (select.options[i].value == checkValue)
select.options[i].selected = true;
break;
然后通过这样来调用：
// 设置select选中该班组
set_select_checked('edit-group', group_id);
注意：不要传'#edit-group'。
扩展资料
js动态设置Select中Option选中
/** * 设置select选中
* @param selectId select的id值
* @param checkValue 选中option的值
* @author lqy */
function setSelectChecked(selectId, checkValue)
var select = document.getElementById(selectId);
for(var i=0; i<select.options.length; i++)
if(select.options[i].innerHTML == checkValue)
select.options[i].selected = true;
break; ;
参考资料来源：MDN web docs 官方网站-HTML select-概要
参考技术B 可以使用javascript和jQuery两种实现方式1：使用javascript实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select name="jumpMenu" id="jumpMenu" onChange="jumpMenu('parent',this,0)">
<option id="1" value="跳转URL">111</option> // 111 是显示给用户的信息
<option id="2" value="跳转URL">222</option>
<option id="3" value="跳转URL">333</option>
<option id="4" value="跳转URL">444</option>
<option id="5" value="跳转URL">555</option>
</select>
<script type="text/javascript">
function display(optionID)
var all_options = document.getElementById("jumpMenu").options;
for (i=0; i<all_options.length; i++)
if (all_options[i].id == optionID) // 根据option标签的ID来进行判断 测试的代码这里是两个等号
all_options[i].selected = true;
;
display("4");
</script>
</body>
</html>
2：使用jQuery实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select name="jumpMenu" id="jumpMenu" >
<option value="1">111</option> // 111 是显示给用户的信息
<option value="2">222</option>
<option value="3">333</option>
<option value="4">444</option>
<option value="5">555</option>
</select>
<script type="text/javascript" src="js/jquery1.8.3.min.js"></script>
<script type="text/javascript">
$(function()
// $("#jumpMenu").val(要选中的option的value值即可);
$("#jumpMenu").val(4);
);
</script>
</body>
</html> 参考技术C form1.aa.innerHTML = "<option>***</option><option>***</option>***<option>***</option>";
就可以了，这里form1是form标签的name属性值。
等好右边的东东可以是字符串变量，因此具体加多少个，怎么加，呵呵，楼主应该知道了吧？
IE下面可以。其他浏览器从没试过。
<form name='fm1'>
<select name='aa'><option>1</option></select>
</form>
<input type='button' value='ADD' onclick='javascript:Add()'>
<script language='javascript'>
i = 1;
function Add()
i++;
fm1.aa.length = i;
fm1.aa.options[i - 1].text = i;
</script> 参考技术D 调用方法：SelectElement("leaveCode", valueToSelect)
函数定义：function SelectElement(id, valueToSelect)
var element = document.getElementById(id);
element.value = valueToSelect;
以上是关于用js获取select的多个选项值的主要内容，如果未能解决你的问题，请参考以下文章