JS 实现 select中指定option选中触发事件(下拉框)

转自:http://www.cnblogs.com/moli-/p/6406170.html

在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发。

想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件

又在select中添加onclick 这下可好了,没选option呢就触发了

当我们触发select的双击事件时,用ondblclick方法。
当我们要取得select的选中事件时,用document.all[‘name‘].value来获取,其中name是select的名称。
如果我们要得到select的全部的值就用一个for循环来实现。代码如下:
var vi = document.all[‘list‘].length;
for(var i=0;i<vi;i++){
document.form2.list(i).value; //form2是<form>的名称
}

<select id="pid" onchange="gradeChange()">
    <option value="1" >选项一</option>
    <option value="2" >选项二</option>
</select>

<script type="text/JavaScript">
       function gradeChange(){
        var objS = document.getElementById("pid");
        var grade = objS.options[objS.selectedIndex].value;
        alert(grade);
       }
</script>

??<select id="pid" onchange="gradeChange()">

    <option grade="1" value="a">选项一</a>

    <option grade="2" value="b">选项二</a>

</select>

<script type="text/JavaScript">
       function gradeChange(){
        var objS = document.getElementById("pid");
        var grade = objS.options[objS.selectedIndex].grade;
        alert(grade);
       }
</script>

<select name="myselect" id="myselect">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
    <option value="opt3">选项3</option>
</select>

$("#myselect").change(function(){
    var opt=$("#myselect").val();
    ...
});


原文地址:https://www.cnblogs.com/zeng-qh/p/9745340.html

时间: 2024-10-02 04:16:48

JS 实现 select中指定option选中触发事件(下拉框)的相关文章

用JS和C#分别在前端和后端控制下拉框为只读的方法的代码

代码期间,将写代码过程较好的代码段备份一次,下面资料是关于用JS和C#分别在前端和后端控制下拉框为只读的方法的代码,应该对各位朋友有较大用途. <HTML> <HEAD> <TITLE>下拉框模拟只读</TITLE> <script type="text/javascript"> function setReadOnly(obj_id){ var obj = document.getElementById(obj_id); o

thinkphp怎么把数据库中的列的值存到下拉框中

1. 先去数据库中查值,查询整个数据表,结果为二维数组. $project = M("project"); $cell = $project->where(array('status'=>1))->order("id desc")->select(); //var_dump($cell); $this->assign('cell',$cell); 2.前台获取遍历 <select class="test" st

easyUI中select下拉框添加option选项

使用jquery easyui的下拉列表combobox碰上问题,下拉列表的项都是从 数据库读出来的,然后我想在动态生成的项中添加一项:"<option value=''>=全部=</option>". 但怎么也添加不成功. 首先试了直接用jquery对该下拉列表进行添加操作: JavaScript code ? 1 2 3 4 5 6 7 8 $('#selUnin').combobox({         url: _callback_url + '&

JS获取select下拉框选中的value或者其name

举例: <select class="js-example-basic-single js-states" style="width: 300px" name="hid" id="hid"> $("#hid option:checked").text()      //这是获取下拉框显示出来的值 [hid为select标签的id] $("#hid option:checked"

jquery操作select下拉框的多种方法(选中,取值,赋值等)

jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text3. var checkValue=$("#select

jquery操作select下拉框的多种方法(选中,取值,赋值等) 转载

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#se

2. select下拉框获取选中的值

1.获取select选中的value值: $("#select1ID").find("option:selected").val();  --select1ID:下拉框的ID值 2.获取select选中的text值:(获取ID字符串拼接)$("#"+select2ID).find("option:selected").text();

下拉框&lt;select&gt;设置选中项的一个问题

基于jQuery,有两种方式设置下拉 1.$("select").val(); 2.$("option:eq(1)").attr("selected","selected"); 方法2有个问题就是只能设置一次下拉框,重复调用设置失效 <script> $(function(){ }); function sltOpt(){ $("select").val(1); } function sltOp

最完美的select下拉框美化

很多人为 select 的诸多不完善而头痛,如无法自定义样式. IE6 中无法被浮动层遮住等等.下面介绍一款堪称最完美的下拉框组件: UU 人下拉框 特点 1 :美化的并且可自定义的外观 UU 人下拉框使用 JS 进行渲染.当页面引入了脚本和 CSS 后,页面中的下拉框都会变成如下外观:精心开发5年的UI前端框架! 该外观是由 CSS 和图片控制.通过修改 CSS 可以很方便地实现更改外观. UU 人下拉框不存在 IE6 中无法被浮动层遮住等问题. 特点 2 :使用简单 UU 人下拉框代码写法与