首页 前端知识 【HTML】select标签,select的jquery用法,select的Thymeleaf中th:field用法

【HTML】select标签,select的jquery用法,select的Thymeleaf中th:field用法

2024-11-04 10:11:17 前端知识 前端哥 474 775 我要收藏

定义和用法
<select> 元素用于创建下拉列表。
<select> 元素最常用于表单中,用于收集用户输入。
提交表单后,需要 name 属性引用表单数据(如果省略 name 属性,下拉列表中的数据将不会被提交)。
<select> 元素内的 <option> 标签 定义下拉列表中的可用选项。
需要使用 id 属性将下拉列表与标签(label)相关联。

属性说明
autofocus    
autofocus    规定下拉列表应在页面加载时自动获得焦点。
disabled    
disabled    规定应禁用下拉列表。
form    
表单id    定义下拉列表所属的表单。
multiple    
multiple    规定可以一次选择多个选项。
name    
名称     定义下拉列表的名称。
required    
required    规定在提交表单之前用户必须选择一个值。
size    
数字    定义下拉列表中可见选项的数量。

<label for="name">请选择一个内容:</label>
<select name="name" id="name">
	<option value="">全部</option>
	<option value="0">内容一</option>
	<option value="1">内容二</option>
	<option value="2">内容三</option>
</select>

2、jquery中select的text和value的用法
$("#select").val("***"); // 设置value为***的项选中
$("#select").change(function(){}); // 当选择内容改变时触发
$("#select").find("option:selected").text(); //获取select选择的text值
$("#select").val(); //获取select选择的value值

3、select的Thymeleaf中th:field用法
th:field,用法:th:field="*{name}"
th:field,默认可以基于值,选中默认值。需要注意的是,th:field需要搭配th:object使用。

<form class="form" id="form" th:object="${object}">
	<select id="name" name="name" th:field="*{name}" class="name">
		<option value="">全部</option>
		<option value="0">内容一</option>
		<option value="1">内容二</option>
		<option value="2">内容三</option>
	</select>
</form>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19935.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!