`

实现 select中指定option选中触发事件

    博客分类:
  • js
阅读更多
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发。

当我们触发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>的名称    }下面介绍一个特殊情况的解决,由于option本身没有事件,所以我们不能给每个option都添加一个onclick事件。如果需要实现点击不同的option,实现不同的函数时,要怎么办,从value里取值在分析是一种办法,但如果value里的值不确定,我们又不想从value里取值怎么办呢?可以这样解决,给每个option添加一个属性,然后在赋一个值,我们在函数里取到这个属性的值就可以判断执行了。---------------------------------------------------------------------------------------------

-------------------------------------------------源代码------------------------------------

‍‍<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>

分享到:
评论

相关推荐

    JS实现select选中option触发事件操作示例

    本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考,具体如下: 我们在用到下拉列表框select时,需要对选中的&lt;option&gt;选项触发事件,其实&lt;option&gt;本身没有触发事件方法,我们只有在select里...

    select option带自定义图片

    当用户选择一个选项时,`&lt;select&gt;`的`change`事件触发,重新渲染选项以反映新的选择。 CSS样式是使这个功能美观的关键: ```css .custom-select { position: relative; display: inline-block; } .custom-...

    页select中如何实现选择option其中一个选项,显示相关的内容

    ### 如何实现在`&lt;select&gt;`中选择一个`...综上所述,通过上述方法可以有效地实现从`&lt;select&gt;`元素中选择一个`&lt;option&gt;`后,在页面的指定区域显示与之相关的新闻内容。这种方案不仅简单易行,而且具有较好的用户体验。

    BootStrap中关于Select下拉框选择触发事件及扩展

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。 这个很好解决: 如下: &lt;select class=form-control onchange=selectOnchang(this)&gt; &lt;option&gt;所有申请商家&lt;/...

    html5 datalist 选中option选项后的触发事件

    使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;body&gt; [removed][removed] [removed] function inputSelect(){ ...

    用jquery获取select标签中选中的option值及文本的示例

    当用户改变下拉列表中的选中项时,onchange事件被触发,随后执行doSome()函数。这允许我们在用户交互后立即获取选中项的信息。 6. HTML和JavaScript的结合: - 示例展示了一个综合使用HTML和JavaScript(通过...

    jquery实现select互斥联动

    3. 逻辑处理:在`change`事件的回调函数中,获取当前选中的值,并根据预设的联动规则更新其他`select`元素的选项。这可能涉及清除某些选项或禁用/启用特定选项。 三、代码示例 以下是一个简单的jQuery实现,展示了...

    jQuery实现select下拉框菜单选中插件.zip

    这样,我们可以通过调用`$('select').selectOption('valueToSelect')`来实现自动选中。 为了使这个插件更具灵活性,我们可以添加更多的功能,比如默认选中第一个选项或最后一个选项,甚至支持通过文本而非值来选中...

    基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: &lt;select&gt; ...

    jquery实现 两个select之间option的转移操作

    本文将深入探讨如何使用jQuery实现两个`&lt;select&gt;`元素之间的`&lt;option&gt;`选项转移操作,包括全选、单选以及删除功能。 首先,我们需要了解`&lt;select&gt;`和`&lt;option&gt;`的基本概念。`&lt;select&gt;`元素用于创建下拉列表,而`...

    el-select获取选中的label值.pdf

    因为`@change`事件触发时,新的`value`可能还没有更新到`this.$refs.myselect.selected`中,这时如果想获取`label`,可能需要通过以下方式: ```javascript &lt;el-select v-model="selectedValue" ref="myselect" @...

    多个select 的互斥选择实现

    在IT行业中,尤其是在前端开发领域,我们经常遇到需要实现互斥选择的情况,即一组多选框(`&lt;select&gt;`元素)之间只能有一个被选中。这样的功能在很多场景下都有应用,比如用户需要从多个选项中单选一个,或者在配置...

    element-ui中select组件绑定值改变,触发change事件方法

    本文将详细解析Element UI中select组件绑定值改变时如何触发change事件的方法。 Element UI是一个基于Vue.js的前端UI框架,它提供了一套完整的组件库以帮助开发者快速构建美观、风格统一的界面。select组件是其中...

    option属性的js事件浏览器差异

    例如,`change`事件在某些浏览器中仅在失去焦点时触发,而在其他浏览器中可能在选中项改变时即时触发。要确保一致的行为,可以使用以下代码: ```javascript option.onchange = function() { // 事件处理逻辑 }...

    jquery根据一个值来选中select下的option实例代码

    在网页开发中,jQuery 是一个常用的 JavaScript 库,它提供了许多便利的方法来操作 DOM 元素,包括选择、修改和操作 Select 下的 Option 元素。本文将详细讲解如何使用 jQuery 根据一个值来选中 Select 下的 Option...

    实现select各种搜索功能

    5. **回车触发选择**:用户按下回车键时,选中当前高亮的搜索结果。 6. **搜索提示**:提供友好的提示信息,如“请输入搜索关键词”等。 通过上述方法,我们可以实现一个功能完备、用户体验良好的`&lt;select&gt;`搜索...

    select选择事件

    根据给定的信息,本文将详细解释“select选择事件”中的相关知识点,包括如何利用JavaScript处理select元素的选择事件、鼠标移动事件以及如何获取select元素的选中值。 ### 一、理解select元素及其事件 #### 1.1 ...

    vue select二级联动第二级默认选中第一个option值的实例

    在本篇文章中,我们将详细介绍 Vue Select 二级联动第二级默认选中第一个 Option 值的实例。该实例具有很好的参考价值,希望对大家有所帮助。 知识点一:Vue Select 二级联动 在 Vue 中,我们可以使用 Select 组件...

Global site tag (gtag.js) - Google Analytics