前端中select option一些实用操作

在写前端界面的时候,对于select标签的操作是比较细致的,本文主要总结一下个人在开发前端界面时,采用的几种处理方法。

前端插件:

bootstrap,juery

引入:(在引入bootstrap的Js插件前,先引入jquey,因为bootstrap的封装依赖于jquery)

附:bootstrap使用网址:http://www.bootcss.com/

需求1:点击下拉框时,出现option选项。

<html>

需求二:select的层级联动

效果如下:

实现方式:

插件:cxselect插件(基于juqery封装)

引入:

 

将省市区的键值对存储在JSON格式中

html代码:

juqey部分:(urlChina后为json格式的存储地址)

 

需求三:更改操作select时,下面选中的option仍然保留

见下图:

html代码:

JS部分代码:(每一次select操作改变时,option自动从后端获取数值(getSelectValue()函数),但无法改变选定的option)

解决后效果:

解决思想:当改变select时,将option选中的部分设置为空。

代码:

以上是关于select部分的用法总结。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值