javascript怎么设置点击了select其中一个option元素时，触发一个方法？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript怎么设置点击了select其中一个option元素时，触发一个方法？相关的知识，希望对你有一定的参考价值。
javascript怎么设置点击了select其中一个option元素时，触发一个方法？
我想做是，当点击下拉框的“手动输入”后，执行一个方法~
怎么实现？？
你好。
首先，你可以为要添加动作的这个<option>元素添加一个id属性，以便脚本引用。如：
<option id="myoption">手动输入</option>然后，为这个元素添加鼠标点击事件，代码我已经为你写好，请参考：
1、如果你是用原生的Javascript实现，代码如下：
// 你的代码
;
2、如果你是喜欢用第三方的 jQuery 框架来实现，可以用下面的代码：
// 你的代码
);
以上两种方法任选一种即可，但注意第2种jQuery的方法需要你在文档中引入jquery.js框架后方能使用。
明白了吗？如还有疑惑，欢迎继续追问，很高兴为你解答。
如果是静态的话，直接用它的class或者di设置事件就行了
如果是动态的话 ，看你要设置的是什么事件，如果是点击实在，你在那个option元素里面加上 onclick="aa(this)";
function aa()
//此处输入内容
怎么用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;
以上是关于javascript怎么设置点击了select其中一个option元素时，触发一个方法？的主要内容，如果未能解决你的问题，请参考以下文章