jquery实现下拉框

作者：System 时间：2024年08月22日分类：所有,jquery 字数：695

使用jQuery实现下拉框（select元素）的基本示例代码如下：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery下拉框示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>
 
<script>
// jQuery代码放在这里
</script>
</body>
</html>

jQuery部分：




$(document).ready(function(){
  // 获取选中的值
  $('#mySelect').change(function(){
    var selectedValue = $(this).val();
    alert("你选择了: " + selectedValue);
  });
});

这段代码实现了一个简单的下拉框，当用户选择不同的选项时，会弹出一个提示框显示选中的值。

jquery实现下拉框

评论已关闭

推荐阅读