我们在用到下拉列表框select时,需要对选中的

选项触发事件,其实本身没有触发事件方法,我们只有在select里的onchange方法里触发。

当我们触发select的双击事件时,用ondblclick方法。

当我们要取得select的选中事件时,用document.all['name'].value来获取,其中name是select的名称。

如果我们要得到select的全部的值就用一个for循环来实现。代码如下:

var vi = document.all['list'].length;

for(var i=0;i

document.form2.list(i).value; //form2是的名称

}

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

---------------------------------------------------------------------------------------------

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

‍‍

选项一

选项二

function gradeChange(){

var objS = document.getElementByIdx_x("pid");

var grade = objS.options[objS.selectedIndex].grade;

alert(grade);

}

================jquery=========

1、获取选中select的value和text,html代码如下:

<select id="mySelect"><option value="1">one</option><option value="2">two</option><option value="3">three</option></select>

则可通过以下script代码s来获取选中的value和text

$("#mySelect").val(); //获取选中记录的value值 $("#mySelect option:selected").text(); //获取选中记录的text值

2、运用new Option("文本","值")方法添加选项option

var obj = document.getElementByIdx_x_x("mySelect");obj.add(new Option("4","4"));

3、删除所有选项option

var obj = document.getElementByIdx_x_x("mySelect");obj.options.length = 0;

4、删除选中选项option

var obj = document.getElementByIdx_x_x("mySelect");var index = obj.selectedIndex;obj.options.remove(index);

5、修改选中选项option

var obj = document.getElementByIdx_x_x("mySelect");var index = obj.selectedIndex;obj.options[index] = new Option("three",3); //更改对应的值obj.options[index].selected = true; //保持选中状态

6、删除select

var obj = document.getElementByIdx_x_x("mySelect");obj.parentNode.removeChild(obj); //移除当前对象

7、select选择的响应事件

$("#mySelect").change(function(){//添加所需要执行的操作代码})

html select 选中触发,实现select中指定option选中触发事件相关推荐

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

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

  2. 如何根据一个值来动态让select下的option选中

    html如下: <select id="test"><option value="0">请选择</option><op ...

  3. js动态设置select中option选中

    今天开发网站遇到一个小问题,如何动态通过js让select控件选中指定的值呢?在调试过程中,发现了amazeui这个ui组件的问题,使用它个组件的样式就无法通过selected=true设置为选中. ...

  4. mysql 查询指定字段数据_MySQL使用select语句查询指定表中指定列(字段)的数据

    本文介绍mysql数据库中执行select查询语句,查询指定列的数据,即指定字段的数据. 再来回顾一下sql语句中的select语句的语法: select 语句的基本语法: select from w ...

  5. 通过js动态设置select中option选中

    2019独角兽企业重金招聘Python工程师标准>>> /** * 设置select控件选中 * @param selectId select的id值 * @param checkV ...

  6. 下拉框选中状态html,js中select下拉框选中

    怎么用js动态 设置select中的某个值为选中值 select 中的某个options为新建,但在子页面新建一个选项时怎么能提交新用JS动态设置select的方法如下: 手动通过原生JS来实现: / ...

  7. mysql select 指定列_MySQL使用select语句查询指定表中指定列(字段)的数据

    本文介绍mysql数据库中执行select查询语句,查询指定列的数据,即指定字段的数据. 再来回顾一下sql语句中的select语句的语法: select 语句的基本语法: select from w ...

  8. html中select标签默认选择,HTML中的select标签如何设置默认选中的选项

    方法有两种. 第一种通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 1 option > 2 option > 3 option &g ...

  9. Js选择框脚本 移动操作select 标签中的 option 项的操作事项

    题目:在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中.反之亦然.如下: 在窗体中有两个多选列表,用户可以从左侧列表中选择任意项,添加到右侧列表中.反之亦然. 此问题需用到选择 ...

最新文章

  1. java多线程工具类_Java多线程系列之:线程的并发工具类
  2. 跨链Cosmos(8)同构跨链交易流程
  3. 为企业门户提供问答式检索--------让系统能回答普通用户提出的问题
  4. 武汉游记,三件新鲜奇葩事
  5. Delphi XE2 之 FireMonkey 入门(41) - 控件基础: TListBox
  6. requests模块介绍
  7. 破解路由器密码并限制和***邻居电脑
  8. 学java怎么做笔记?教大家整理java笔记的一些方法
  9. 一次NBU备份错误诊断
  10. Perl 脚本命令行传入参数
  11. 清风数学建模学习笔记——逻辑回归的二分类模型
  12. 计算机开机桌面文件丢失怎么办,电脑重启桌面文件丢失怎么办
  13. 爬取网站小猪短租的少量信息及详细介绍 ,requests库,bs4库的使用
  14. tensorflow目标检测--识别赵丽颖
  15. 分享一张职场学习必备的工作法思维导图
  16. 对大学三年学习生活的总结与反思
  17. RPG Maker mv框架代码解析之窗口图片显示
  18. 6.SSH框架整合及简单使用示例
  19. 终于学会数组的使用啦~~~------C语言数组学习笔记详解
  20. odoo学习必看-提问的智慧《How To Ask Questions The Smart Way》

热门文章

  1. CAD的DXF解析中LWPOLYLINE多线段凸度的相关概念和弧度转换
  2. android如何释放图片缓存
  3. OMAP335X-内核BSP之hwmod
  4. NS版暗黑破坏神3金手指开发教程(6)
  5. [EndNote]EndNote在Word中的工具条消失了怎么办?-知乎转载
  6. 黑龙江局与深圳大疆公司等开展无人机植保技术交流
  7. 什么时候能被好运眷顾一次:快手前端三面,败在智力题称砝码重量...
  8. 【实拍电机】保时捷PPE平台解析
  9. sendgrid java_store-sendgrid-java-how-to-send-email-example | Microsoft Docs
  10. dat文件导入cad画图步骤_准确又高效的读入CAD几何——详解Fluent Meshing导入文件的几种方法...