vue.js如何渲染select使得其有默认选中

图片说明
这个是详情页面的代码,能从后台获取到下拉框内容,但是却没办法将原先选中的选项设置为selected,只能将它放在第一个,这样就会有两个该选项图片说明
要实现如下图的效果图片说明
拜托了各位~~

0

3个回答

0
qq_35728177
Tsui丶 回复Qyanxiaoyou: 都没帮到你
接近 2 年之前 回复
Qyanxiaoyou
Qyanxiaoyou 解决了,谢谢
接近 2 年之前 回复
Qyanxiaoyou
Qyanxiaoyou 已经有选中的值,如何在详情页面渲染
接近 2 年之前 回复

怎么解决的,楼主,麻烦贴下,谢谢。

0

楼主分享一下,Q:631429048,谢谢。

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
(vue.js)vue中怎么设置select默认选中
<div> <select v-model="selected"> <option v-for="opt in options" v-bind:value="opt.value">{{opt.text}}</option> </select> <br> &am
angular select 默认选中指定项,option动态渲染
<select ng-model="com.game_id" ng-options="x.game_id as x.game_name for x in game_info"> </select>$scope.game_info = [ {game_id : 0 , game_name:'全部游戏'}, {game_id : 3 , game_nam
使用vue如何默认选中单选框
使用了vue以后,发现这真的是一个灵活高效的框架,能够轻松实现页面的实时刷新。 那么,今天先聊聊单选框的使用。一般我们使用单选框,会这么写://HTML <input type="radio" name="radios" value="1" checked><label>one</label> <br> <input type="radio" name="radios" value="2"><lab
vue.js 利用v-model让select默认选中不生效的问题
笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下。 问题 先上代码: 上图是前端的H5页面 下面是js代码: 一眼看上好像也没有什么问题。js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义...
Ajax动态加载<td><select>后下拉框默认选中问题
$("tr:last").find("#mySelect option[value='"+emp.employeeState+"']").attr("selected",true); 每次得到表格的最后一行的下拉框$("tr:last").find("#mySelect option[value='"+emp.employeeState+"']"),比对值相等就选中
关于通过artTemplate模板的方式实现城市的联动
1.创建一个json格式的数据 var cityData={ Data: [{ value: '110000', text: '北京市', children: [{ value: "110101", text: "北京市", children: [{
select 默认选中问题
select 默认选中问题 问题描述 select 标签会默认选中第一个 option ;但是一般使用的时候不想要默认选中第一个,而是一个空白的选择框 解决方案 给select元素pretend一个 option disabled = "disabled">option>; 给select元素pretend一个; option stype="disp
tp5下拉菜单默认选中(内置标签,volist)
/** * @todo * $info.brand_state是后端定义变量 * $vo是标签循环的value值 * 通过eq标签来比对是否一致进行默认选中状态 */ {volist name=&quot;brand_state_config&quot; id=&quot;vo&quot; key=&quot;k&quot;} {eq name=&quot;vo&quot; value=&quot;$info.brand_state&quot;} &amp;lt;op..
multipleSelect多选框选中状态
从后台获取到多选框中的值后传到前端js:item_mode = ','+item_mode+','; //从后台传过来的值 $('.mode_type option').each(function () { if (item_mode.indexOf(','+this.value+',')!=-1)this.selected=true; }); //重新加载 $('.selects')....
Vue下拉框回显问题,回显默认选中随机问题
今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了,但是这个问题还是存在的,后来发现问题是回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些,因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果总结:1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷...
Laravel框架 -- Select无限分类下拉框样式以及默认选中
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;经过上一篇的 Laravel框架 – 分类无限递归渲染视图操作 之后,我们需要对其修改一下,变成我们需要的下拉框。 &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;Select的渲染视图,请参考 Laravel框架 – 分类无限递归渲染视图操作 这篇博客文章,只要把返回HTML的代码更改一下,就OK了!! &amp;nbsp; ...
vue中select的使用以及select设置默认选中20190222
1.问题: 写角色页面,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白 2.解决思路: html代码如下,通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值即coupon.id,如果不存在,则获取option的文本内容,也就是下面代码中coupon.name. 3.大神的Demo参考: &amp;lt;sel...
vue+layui+select遇到的1个奇葩bug,坑了我好几天
    &amp;lt;div class=&quot;layui-form-item&quot;&amp;gt;                        &amp;lt;label class=&quot;layui-form-label&quot;&amp;gt;业务&amp;lt;/label&amp;gt;                           &amp;lt;div  class=&quot;layui-input-inline&quot;&amp;gt;         
Html Select 使用selected属性设置默认选择项
Html Select 如何进行默认选择,只要给某个option 添加 selected = selected"属性就是默认选项   全部  通过  未通过    则“通过”为默认选中。
ajax动态加载select选项后,设置选中项
页面上面有通过ajax动态获取select的选中项后,js设置选中项,要加延迟效果:window.setTimeout(function() { loadFinanceData2(trs); }, 200);
vue.js选中动态绑定的radio的指定项
上一文,介绍了vue.js动态添加、删除绑定的radio选项,本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是: 不管  你的checked属性值是true或者false,他都会选中。 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用chec
使html:select根据数据库的值默认选中一个选项
在很久之前就遇到这个问题了,后来好久没做有点忘记这个怎么写,今天还是把他记下来吧 其他办法我都不满意,最后还是觉得js是最简单的,js代码如下     js 代码 &amp;lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&amp;gt;                    var lengths = $('recommendFo...
select 动态设置某一项为默认选中
如果不特别设置,默认选中第一项; 现在从数据库中动态查询数据显示,并且默认项为设置为某一项(非第一项): $sql="select * from user "; $query=mysql_query($sql); while($row=mysql_fetch_array($query)){ $name=$row[name]; }
vue v-for 循环复选框-默认勾选第一个的实现方法
应用场景:在进行多选的时候一般默认显示第一个。 实现方法:纯vue实现 例子:&lt;span v-for="(one,index) in site"&gt;&lt;input type="checkbox" :checked="index == 0" style="vertical-align: middle;"&gt;&lt;label&gt;{{one.name}}&lt;/label...
jQuery MultiSelect 如何设置多选框的默认选中项
我用的是jQuery MultiSelect 插件下拉多选框, Select:                      请选择             性病商务通             商务通             QQ             性病QQ             企业QQ             电话             性病电话          
vue.js使用select切换图片
div id="app"> div class="pic"> img :src=imgsrc> div> 第1张第2张第3张 option无法添加事件--> select v-model="selected" @change="changeimg(parseInt(selected))"> option value="1">第一张o
layui 下拉框默认选中
$(&quot;#selectList&quot;).find(&quot;option[value=&quot;+camera_id+&quot;]&quot;).prop(&quot;selected&quot;,true); form.render();
vue2.0 下拉框默认标题设置
昨天到今天,用vue2.0在写一个性别选择框,一给option添加seledted属性就报错selected 已经绑定在<select></select> 上了 , 你选择了哪个选项, selected 就是那个选项的value了 ,你想让哪个选项为默认选中的话,就在data里的seleced 设置为那个选项的value在单击<select></select> 时,给’性别’这个选项添加一个disa
vue中动态select的使用
html代码如下:   通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;violationsList&quot;&amp;gt; &amp;lt;div class=&quot;type-select&quot;&amp;gt; &amp;lt;select name=&quot;selected&quot; id=
select动态绑定vue.js
动态选项,用 v-for 渲染: {{ option.text }} Selected: {{ selected }} new Vue({ el: '#demo', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two',
JSTL控制select中的某一项被选中
<br /><select name="condition" onChange="showConditionInput(this)" id="searchCondition" class="condition" style="font-family: sans-serif" mce_style="font-family: sans-serif"> <option value="">aa</option> <option value="elementName"
Vue下拉选择选中原来的数据
在编辑信息的时候,进入编辑页面所有数据应该都是数据库中的,有的数据是通过下拉框选择的,那这时候怎么选择数据库中的那个数呢,使用Vue.js编写代码的时候,可以使用v-model进行表单输入绑定。示例代码如下:&amp;lt;select class=&quot;select&quot; name=&quot;peopleNum&quot; id=&quot;peopleNum&quot; size=&quot;1&quot; v-model=&quot;peopleNum&quot;&amp;gt;    
vue v-for循环出多个select,select取值(select有默认选项)
&lt;ul&gt; &lt;li v-for="item in list" &gt; {{item.name}} &lt;select @change="changea($event)"&gt; &lt;option value="" disabled selected&gt;必选&lt;/option&gt; ...
Vue.js获取被选择的option的value和text值
1.获取option的value的值,watch option 控件时,或自动获取option的value的值。2.获取被选中的option的text的值时,使用:$(&quot;#optionID option:selected&quot;).text
vuejs中select下拉框值的获取
代码片段 {{myVal}} &amp;lt;select v-model=&quot;myVal&quot;&amp;gt; &amp;lt;option v-for=&quot;item in options&quot; :value=&quot;item.value&quot;&amp;gt; {{item.name}} &amp;lt;/option&amp;gt; &amp;lt;/select&amp;gt; data(){ return{
vue.js中关于下拉框的值默认及绑定问题
一、今天遇到vue中下拉框问题,故而写点东西留个脚印 &amp;lt;template&amp;gt;   &amp;lt;select v-model='selected' @click=&quot;disable()&quot;&amp;gt;     &amp;lt;option v-for=&quot;(option,index) in options&quot; v-bind:value=&quot;option.value&quot; :disabled=&quot;option.disa.
layui 根据根据后台数据动态创建下拉框并同时默认选中
第一步 form表单里写好一个下拉框 &amp;amp;lt;div class=&amp;quot;layui-form-item&amp;quot;&amp;amp;gt; &amp;amp;lt;label class=&amp;quot;layui-form-label&amp;quot;&amp;amp;gt;下拉选择框&amp;amp;lt;/label&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;layui-input-blo
Vue联动下拉框默认选中
控制器里: &amp;lt;?php namespace app\index\controller; use think\Controller; use think\Db; class Index extends Controller { public function index() { return $this-&amp;gt;fetch('index'); } ...
Vue.js:Select--Option >下拉框绑定和取值
遇到了这个解决了,所以记录一下: 1.Vue.js 2.https://www.iviewui.com/components/select   完成vue.js下拉框选择绑定与取值,实现效果图如下:     template代码   &amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;Form :model=&quot;formItem&quot; r...
动态生成的option 并插入select标签的第一个,且默认选中
   html:         &amp;lt;select id=&quot;scene&quot;&amp;gt;             &amp;lt;option value=&quot;111&quot;&amp;gt;111&amp;lt;/option&amp;gt;             &amp;lt;option value=&quot;222&quot;&amp;gt;222&amp;lt;/option&amp;gt;         &amp;lt;/select&amp;
select默认样式删除
CSS去除selec框默认样式select{     /*隐藏select的下拉图标*/     appearance: none;     -webkit-appearance: none;     -moz-appearance: none;     /*去除高亮*/     -webkit-tap-highlight-color: #fff;     /*去除边框样式*/     out...
【TP5】select下拉框的默认显示父级
author:咔咔 wechat:fangkangfk   总结:这块对于初学者有时候是有点绕,记住一点,只要条件相等就会显示对应父级的名字 如果要默认显示上级,就应该在上级的option做字段匹配。判断即可   数据库   在做之前一定要先打印你的数据来看 ,可以看出,打印出来的数据vc_pid跟数据库中的vc_id是一样的,所以就以这个为条件   代码 ...
MDUI中Select初始化问题
在使用MDUI的时候,使用级联时,碰到了数据不能正常显示的问题,去GIT HUB中提问了作者后发现,原来还是自己没有好好的看说明文档,那么为什么要写这个呢?因为发现了作者没有标明的一点,就是初始化的问题,主要还是提醒自己吧! HTML &amp;lt;select ref=&quot;el&quot; value.bind=&quot;val&quot; class=&quot;mdui-select&quot; mdui-select&amp;gt; JS ...
vue.js select下拉框绑定和取值
最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 {{send.CODE}} 2.取值就直接获取下拉框,v-model绑定的属
如何让select 多选自动默认为全选?
示例代码:&amp;lt;form name=&quot;form1&quot;&amp;gt; &amp;lt;select name=&quot;sel1&quot; size=&quot;4&quot; multiple id=&quot;sel1&quot; style=&quot;width:210px; height:120px &quot;&amp;gt; &amp;lt;option value=&quot;0,1,2,3,4,5,6&quot; selected=&quot;selec
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 python其础教程版本 珠海有区块链有培训班的

相似问题