下面是两种默认选中第一个option的方法
var selec = document.getElementById("id")
selectExt.options[0].selected = true
$("#id option:first").prop("selected", 'selected');
第二种是使用jQuery的 prop()方法,因此使用prop()时请使用jquery1.6及以上版本
下面是两种默认选中第一个option的方法 var selec = document.getElementById("id"); selectExt.options[0].selected = true;$("#id option:first").prop("selected", 'selected'); 第二种是使用jQuery的 prop()方法
<
option
xss=removed>1</
option
>
<
option
xss=removed xss=removed>2</
option
>
<
option
xss=removed>3</
option
>
</
select
>
第二种 为通过前端js来控制
选中
的项:
< script type = text/javascript >
function change(){
给对应
option
元素直接添加
select
ed属性<
select
>
<
option
value="0">one</
option
>
<
option
value="1">two</
option
>
<
option
value="2"
select
ed>three</
option
>
</
select
>
option
加载完成后给对应元素添加
select
ed属性$("selec
select
的数据是从后台获取的,用v-model做了绑定,获取数据后给绑定值设置了值,也实现了
默认
选择,但是却不能再选择了,始终都是设置的那个值,在绑定对象中加了设置初始值后才能正常选择
<a-
select
v-model="queryParam.pcId" style="width:300px;">
<a-
select
-
option
v-for="p in pcData" :key="p.id" :value="p.id">{{p.pcName}}</a-selec
select
标签构成的下拉框和
jquery
通过js构建的下拉框用法一样。例如:
html下拉框:
<
select
id="editState" class="combobox validatebox" name="dto.baseCode.state" style="width:135px"
data-
option
s="editable:false,required:true">
出现这种问题的原因:一般我们的
select
的下拉项的数据都是请求接口出来的,但是会出现这样问题,请求数据是需要一定的时间(比如这个接口是异步请求),可能接口还没请求出来页面都已经渲染完成了。那么等这个接口请求出来,
默认
选中
第一项也就不会再生效了。
解决方式:一般这个下拉菜单接口的数据是这样的形式,list:[{id:1,value:'中国',...},{id:2,value:'美国,...'}]。当页面初始化的时候,我们可以进行判断,如果接口数据请求出来了,并且我们没有选择下拉框选项的时候,就把路由重置到
今天写项目,需要循环出
select
内的数据以后,页面一加载
默认
选中
第一个
数据,写完循环发现原本
默认
显示第一条的
select
框没变化,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,自己研究了一下,发现很简单,记录一下。
一.初始效果
<template>
<div class="statistical">
<span>请选择店铺:</span>
<head>
<meta charset='utf-8'>
<script src='
jquery
-1.11.3.js'></script>
</head>
<body>
<
select
id=
<
select
id = "sel" >
<
option
value = "1" >1</
option
>
<
option
value = "2"
select
ed = "
select
ed" >2</
option
>
<
option
...
// 将
第一个
option
标记为
选中
状态
$second
Select
.find('
option
:first-child').prop('
select
ed', true);
其中,`#second-
select
` 是第二个下拉列表的 ID,你需要将其替换为你实际使用的 ID。这段代码使用了
jQuery
库来查找和修改 DOM 元素。如果你不使用
jQuery
,可以使用原生 JavaScript 代码实现相同的逻辑。
springboot 使用thymeleaf 模板引擎时报错org.xml.sax.SAXParseException: 元素类型 "link" 必须由匹配的结束标记 "</link>" 终止
14724
springboot 使用thymeleaf 模板引擎时报错org.xml.sax.SAXParseException: 元素类型 "link" 必须由匹配的结束标记 "</link>" 终止
前端客栈:
关于wordpress 更新时需要FTP 服务器账户密码 的解决方法
「已注销」:
springboot 使用thymeleaf 模板引擎时报错org.xml.sax.SAXParseException: 元素类型 "link" 必须由匹配的结束标记 "</link>" 终止
wojiaohb: