zoukankan      html  css  js  c++  java
  • Javascript获取select下拉框选中的的值

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

    分别使用javascript原生的方法和jquery方法
    <select id="test" name="">
    <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()); //拿到选中项的文本

    三:实战使用
    给模块名称输入的时候带上产品名称具是选中产品名称后在module的input中加入产品名称前缀(给标签加select选项的前缀)
    第一步:用select标签配合freach来循环遍历集合
    <tr>
    <td style="text-align:right;">请选择智能硬件产品</td>
    <td>
    <div>
    <select id="hid" name="hid" style="200px;" >
    <option value="">--请选择--</option>
    <c:forEach items="${HardwareList}" var="ha">
    <option value="${ha.id }">${ha.bt}</option>
    </c:forEach>
    </select>
    </div>
    </td>
    </tr>
    第二步:写模块名称标签
    <tr>
    <td style="text-align:right;">模块名称</td> <td>
    <div class="input-text">
    <input type="text" id="mkmc" name="mkmc" />
    </div>
    </td>
    </tr>
    第三步:用js的jquery去到hid的选项值,并且赋给mkmc的input标签的value
    /给模块名称input标签添加前缀
    $("#hid").click(function (){
    var index=$(this)[0].selectedIndex ;
    console.log($(this)[0].options[index].text+"-");
    a=$(this)[0].options[index].text+"-";
    $("#mkmc").val(a)
    });

  • 相关阅读:
    Python 安装Twisted 提示python version 2.7 required,which was not found in the registry
    Openfire Strophe开发中文乱码问题
    css div 垂直居中
    How to create custom methods for use in spring security expression language annotations
    How to check “hasRole” in Java Code with Spring Security?
    Android 显示/隐藏 应用图标
    Android 当媒体变更后,通知其他应用重新扫描
    文件上传那些事儿
    专题:点滴Javascript
    主流动画实现方式总结
  • 原文地址:https://www.cnblogs.com/jpfss/p/7065271.html
Copyright © 2011-2022 走看看