下拉框找对象和找value的那些事

最新推荐文章于 2023-03-30 09:50:01 发布

俗世凡人行

最新推荐文章于 2023-03-30 09:50:01 发布

阅读量172

点赞数

分类专栏：实战兴邦

本文链接：https://blog.csdn.net/weixin_41887155/article/details/88727426

版权

实战兴邦专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>
      书籍分类:
      <select id="s1" >
          <option value="1">教学类</option>
          <option value="2">技术类</option>
          <option value="3">科学类</option>
          <option value="4">文学类</option>
      </select>  
      <button>点击</button>  
</body>
</html>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $("button").click(function(){
        //获取下拉框的对象     
        var select = document.getElementById("s1");
        //获取当前选中的值,这个已经可以满足大多数传递参数value的需要
        var value = select.value;
        //获得该下拉框所有的option的节点对象,得到的options是一个对象数组
        var options = select.options;      
        //如何获得第几个option的value值?比如我要获取第一option的value,可以这样
        var value1 = options[0].value;       
        //如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样：
        var text1 = options[0].text;
        //如何获得当前选中的option的索引
        var index = select.selectedIndex;
        //如何获得当前选中的option的文本内容,这个也经常用
        var selectedText = options[index].text;
        alert(selectedText); 
    });
</script>