semantic-ui 实现select下拉框的数据绑定

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量167 收藏
点赞数
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TheYoungGirl/article/details/129819200
版权

下拉框如图：
在这里插入图片描述
需要实现效果：
一、在数据库没有该参数值时 是请选择状态。
在这里插入图片描述
二、如果有参数值时 则直接绑定该下拉框的value值
图中user.recovery_time值为4
因为没有vue的数据绑定，一时间很头疼，在js中给select的value赋值也无法选中下拉框对应的option

解决办法：把“请选择”的value绑定后端传过来的参数值，这样既能保证默认的参数选择为后端传过来的，又可以识别该参数值然后选择了正确的option，问题完美解决，以下附上代码参考！



请选择
2小时
4小时
6小时
8小时
12小时

在这里插入图片描述

TheYoungGirl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
semantic-ui的下拉菜单效果在网页中的引入
GeekLee的博客
06-10 3216
文件结构结构： first_web_2.html{% load staticfiles %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first web</title> <link rel="stylesheet" href="{% static 'css/
下拉框数据绑定以及输入查询
qq_44254122的博客
04-17 295
下拉框数据绑定以及输入查询 开发工具与关键技术：Visual Studio 作者：吴新洋 撰写时间：2019年04月16日 1.在视图界面创建下拉框数据绑定以及输入查询 的HTML 代码： 2.使用 juqery 绑定 2-1 学院下拉框的数据绑定： createSelect(“searchAcademeID”, “selectAcademe”); 注释searchAcademeID：这个是获取...
关联表 查下拉框的数据
ChangKA的博客
12-27 822
1.jsp写入下拉框 *所属活动 ： 2.js中引入 mini.get('fkActivityId').setUrl(contextPath + '/district/recruitmentActivity-recruitmentactivity/recru
[Semantic] dropdown（select）操作
Danny Chen的专栏
10-20 8243
设置默认值 方法一： $(‘.ui.dropdown’).dropdown(‘set selected’, value); 方法二，要设置默认值必须同时设置text和value (‘.ui.dropdown′).dropdown(‘settext′,text);(‘.ui.dropdown’).dropdown(‘set text’, text); (‘.ui.dropdown’).dr
semantic-ui基础使用
dyk
07-23 5322
semantic-ui引入CDN快速入门常用组件按钮 (Button)大小流式 (Fluid)强调 (Emphasis)切换 (Toggle)浮动 (Floated)动画 (Animated)图标 (Icon)标签 (Label)组合按钮组 (Buttons)图标按钮组(Icon Buttons)状态激活 (Active)禁用 (Disabled)加载 (Loading)分隔条标准分隔条垂直分隔条 (Vertical Divider) Semantic UI—完全语义化的前端界面开发框架，代码可读性与可理解
基于Semantic UI的下拉输入框
jamst
06-20 585
[code="java"] [/code] [code="java"] $("#top_search_form").find(".ui.search")....
Select下拉框数据的查询以及绑定
weixin_44542089的博客
06-16 4643
下拉框，也就是我们在搭建页面时经常会遇到的< select >标签，select标签通常和一起使用，一个作为下拉框一个则为其中的选择项。但到了自己做项目的时候才发现，< option >标签根本就用不上。在制作页面时，其中大部分的下拉框中的数据都是通过控制器中的Linq小查询方法查询出来的，其中的选项数据在控制器中被获取到后，再通过封装好的方法再绑定到下拉框中供用户查看&a...
03数据绑定
baidu_41922918的博客
07-23 396
Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。 3.v-bind:可以简写为: <!DOCTYPE html> <html> <head> &l
semantic ui drapdown获取选中值
thekey1314的专栏
07-04 1565
设置默认值方法一： $(‘.ui.dropdown’).dropdown(‘set selected’, value);方法二，要设置默认值必须同时设置text和value (‘.ui.dropdown′).dropdown(‘settext′,text);(‘.ui.dropdown′).dropdown(‘settext′,text);(‘.ui.dropdown’).dropdown(‘se...
修改semantic ui 下拉菜单的选中样式以及鼠标移上去的样式
王建野的专栏
01-04 5268
semantic ui 默认的下拉菜单选中的样式以及鼠标一上去的样式透明度太大，不仔细看都看不清楚，所以需要修改下这个默认样式。 .ui.dropdown .menu > .item:hover { background:rgba(255, 0, 0, 0.43)none repeat scroll 0% 0% !important;
semantic ui 下拉菜单支持全文搜索/添加列表项/更改事件
王建野的专栏
01-04 5893
本实例是实现品牌型号联动，当品牌更改时，型号列表中会显示这个品牌下的型号。 前端html代码如下 js代码
semantic-ui 下拉框
JOKER0707的博客
05-04 1338
　　注意：在使用semantic的下拉框的时候，不仅需要引入semantic.css，还要引入semantic.js，最重要的是引入jquery。否则下拉效果不会显示。 　　并且，jquery必须先于semantic.js引入，因为semantic.js需要用到jquery。 1、标准的下拉框 <!DOCTYPE html> <html> <h...
semantic-ui 下拉菜单预加载
qq_44688635的博客
05-29 503
以获取分类信息的下拉框为例，具体查看官方文档 目录重点前端后台 //分类信息的下拉框 <div class="field"> <div class="ui labeled action input"> <div class="ui type selection dropdown"> <input type="hidden" name="typeId"> <i class="dropd
input获得select的内容并显示在输入框中（可以选中多个值）
sky_LQ的博客
05-08 6919
htlm:js：效果：
Vue.js:Select--Option >下拉框绑定和取值
热门推荐
杨的博客
08-07 6万+
遇到了这个解决了，所以记录一下： 1.Vue.js 2.https://www.iviewui.com/components/select   完成vue.js下拉框选择绑定与取值，实现效果图如下：     template代码   &lt;template&gt; &lt;div&gt; &lt;Form :model="formItem" r...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 408
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 192
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 270
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
semantic-ui 实现系统通知页面
05-25
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <div class="ui container"> <h1 class="ui header">系统通知 <div class="ui message"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值