现在有一id=test的下拉框,怎么拿到选中的那个值呢?

分别使用javascript原生的方法和jquery方法

<select id="test"  name="" multiply="multiply" size="10">   //multiply设置可以多行显示,size设置默认显示多少行。
  <option   value="1">text1</option>   
  <option   value="2">text2</option>   
 </select>

code:

一:javascript原生的方法

1:拿到select对象: var  myselect=document.getElementById("test");

2:拿到选中项的索引:var index=myselect.selectedIndex ;             // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value:  myselect.options[index].value;

4:拿到选中项options的text:  myselect.options[index].text;

二:jquery方法(前提是已经加载了jquery库)

1:var options=$("#test option:selected");  //获取选中的项

2:alert(options.val());   //拿到选中项的值

3:alert(options.text());   //拿到选中项的文本

三:Js实现下拉框选项的新增和移除

1:拿到select对象: var  myselect=document.getElementById("test");

2:新增:myselect.options.Add(new options("text","value"));

3:移除:myselect.options.Remove(myselect.options[myselect.selectedIndex]);

4:清空:myselect.empty();

Html下拉框的定义以及JS、Jquary取值、添加和移除的更多相关文章

  1. SageCRM 页面加载完后,用下拉框联动修改放大镜字段的取值范围

    原理很简单就是修改放大镜属性中的sql. 函数如下:第一个参数是字段的名称.第二个参数是需要控制这个放大镜的sql.可以跟进下拉框的值来组织这个sql. /*--------------- For C ...

  2. select 下拉框 disabled 则 Form 获取不到值

    select 下拉框 disabled 则 Form 获取不到值 有时候需要禁用 下拉框 , 但是表单又需要获取到 下拉框的值. 解决方案1: 使用文本框和隐藏域 来代替下拉框 disabled 解决 ...

  3. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  4. Js获取下拉框当前选择项的文本和值

    现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法: <span class="red">* </span> 地       区: ...

  5. 关于控制下拉框select只读的js控制

    文本框有readonly属性,直接设置:下拉框没有readonly属性,也不能通过其他属性进行只读的设置,下拉框只有disabled属性,但是这个属性设成true之后,值就获取不到了: 我在网上搜了一 ...

  6. DevExpress的下拉框控件ComboxBoxEdit怎样绑定键值对选项

    场景 DevExpress的下拉框控件ComboBoxEdit控件的使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1028 ...

  7. Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值

    目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...

  8. C#通过SendMessage发送消息,改变其他程序的下拉框控件(ComboBox)的值

    IntPtr cbh= new IntPtr(handle); //ComboBox的句柄 SendMessage(cbh, 0x014D, new IntPtr(-1), "需要选中的下拉 ...

  9. 下拉框多级联动辅助js,优化您的下拉框

    function IniteSelect(options) { $("body").IniteSelect(options) } (function ($) { $.fn.Init ...

随机推荐

  1. Linux下查看每个目录所占用空间大小的命令

    cd到上级目录,然后输入一条命令即可查询每个子目录所占用的空间大小 du -h --max-depth=1 可以更改--max-depth参数的值,该参数表示查询子目录的层级,当前为1层

  2. Entityframework批量删除

    UI层 <a href="#" onclick="DelData(0);return false;" id="a_del" class ...

  3. Magento后台订单显示产品图片的修改方法

    Magento后台订单原来是没有显示产品图片,客服业务还得到网站前台查找这个产品的图片提供给发货部,这样是很不方便的.为提高工作效率,应客服业务要求,现对Magento后台订单进行修改,使订单页面就显 ...

  4. Azure 云助手正式发布

    Azure云服务在中国市场风生水起,越来越多的用户选择Azure作为平台将业务转向云端.随着移动互联网在中国的蓬勃发展,手机应用的体验深入人们的生活及工作.用户管控云服务也不应该只局限于电脑前,而是可 ...

  5. iOS中动画的简单使用

    iOS中的动画右两大类1.UIView的视图动画2.Layer的动画 UIView的动画也是基于Layer的动画动画的代码格式都很固定 1.UIView动画 一般方式[UIView beginAnim ...

  6. 硬盘缓存的最佳方案,DiskLruCache完全解析

    收藏自:http://blog.csdn.net/guolin_blog/article/details/28863651

  7. Linux下软件包的多种安装方式

    源码包安装 在Linux下的很多软件都是通过源码包方式发布的,虽然相对于二进制软件包,配置和编译起来繁琐点,但是它的可移植性却好得多,针对不同的体系结构,软件开发者往往仅需发布同一份源码包,不同的最终 ...

  8. DEDECMS调用特定ID文章内容的实现方法

    DEDECMS调用特定ID文章内容的实现方法 {dede:loop table='dede_addonarticle' sort='aid' row='8' if='aid=524'} [field: ...

  9. 获取元素高度及定位js

    <script type="text/javascript">                                   $(window).scroll(f ...

  10. springMVC访问静态资源的两种方式

    1<mvc:default-servlet-handler/> 2 <mvc:resources mapping="/images/**" location=&q ...