jquery获取下拉框的值和文本

一笼蟹黄包

已于 2024-03-14 13:48:46 修改

阅读量416

点赞数 3

文章标签： jquery 前端 javascript

于 2023-12-08 15:32:39 首次发布

本文链接：https://blog.csdn.net/weixin_44181419/article/details/134186860

版权

获取下拉框文本的值，代码如下所示：

HTML代码：

<select name="classroomid" id="classroomid">
  <option value="1">1班</option>
  <option value="2">2班</option>
  <option value="3">3班</option>
</select>

JQuery代码：





<script type="text/javascript">
$(document).ready(function(){
  $('#classroomid').change(function(){ // 当下拉框的选项变化时触发时间
    var options=$("#test option:selected");  //获取选中的项
    var selectedValue = $(this).val(); // 获取选中的值
    var selectedText = $(this).find('option:selected').text(); // 获取选中的文本
    
    console.log("选中的项: " + options);
    console.log("选中的值: " + selectedValue);
    console.log("选中的文本： " + selectedText);
  });
});


//不绑定事件时的获取方法
var options=$("#classroomid option:selected");  //获取选中的项
$("#classroomid option:selected ").val()  //拿到选中项的值
$("#classroomid option:selected ").text() //拿到选中项的文本
</script>