• 技术文章 >web前端 >前端问答

    jquery怎么修改select的选中值

    青灯夜游青灯夜游2022-09-07 17:57:28原创1663

    修改步骤:1、使用属性选择器选取原选中值,并利用attr()函数将选中状态去除,语法“$("[selected]").attr("selected", false);”;2、通过id属性值获取指定option元素,并利用attr()函数给该元素设置选中状态,语法“$("#id值").attr("selected", "selected");”。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

    select 元素可创建单选或多选菜单。

    option 元素定义下拉列表中的一个选项(一个条目)。

    浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

    jquery修改select选中值的方法

    在jquery中,可以通过给指定option元素添加selected属性来修改select选中值。

    属性描述
    selectedselected规定选项(在首次显示在列表中时)表现为选中状态。

    实现步骤:

    步骤1、使用属性选择器选取原选中值,并利用attr()函数将选中状态去除

    $("[selected]").attr("selected", false);

    步骤2、通过id属性值获取指定option元素,并利用attr()函数给该元素设置选中状态

    $("#id值").attr("selected", "selected");

    实现示例代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="js/jquery-3.6.1.min.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				$("button").click(function() {
    					$("[selected]").attr("selected", false);
    					$("#opel").attr("selected", "selected");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<select>
    		  <option>请选择选项</option>
    		  <option value ="volvo">Volvo</option>
    		  <option value ="saab">Saab</option>
    		  <option id="opel" value="opel">Opel</option>
    		  <option value="audi">Audi</option>
    		</select>
    		<button>修改选中值为Opel</button>
    	</body>
    </html>

    1.gif

    说明:

    attr() 方法可以设置被选元素的属性和值。

    设置单个属性的语法

    $(selector).attr(attribute,value)
    参数描述
    attribute规定属性的名称。
    value规定属性的值。

    设置多个属性/值对

    为被选元素设置一个以上的属性和值。

    $(selector).attr({attribute:value, attribute:value ...})
    参数描述
    attribute:value规定一个或多个属性/值对。

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery怎么修改select的选中值的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:jquery
    上一篇:能通过jquery实现ajax调用的方法吗 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 使用ajax需要引入jquery吗• jquery中子元素选择器和后代元素选择器有什么区别?• jQuery发布 3.6.1 新版本,看看有哪些改进!• jquery能取到标签的值吗• jquery版本2.x和3.x的区别是什么• jquery能对数组使用函数吗
    1/1

    PHP中文网