bootstrap實現下拉框dropdown選中select option 美爆了
bootstrap 官網的例子有點坑,它只給你下拉,並且美化了,但你點選下拉卻不能選擇,這個坎就已經讓一大堆人不想用它下拉框了,
但原生的下拉框在每個瀏覽器長的的不一樣,尤其是在ie太醜,好了廢話不多說直接上程式碼;
<div id="addgroups" class="btn-group"> <button type="button" data-name="" id="" class="btn btn-default"> <i class="fa fa-plus">Add Groups</i> </button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id=""> <span class="buttonText"><i id="dropdownMenu2" class="fa fa-eye"></i></span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#" onclick="shows1($(this).text())"><i class="fa fa-pencil">Full AccessRead</i></a> </li> <li> <a href="#" onclick="shows1($(this).text())"><i class="fa fa-eye">Read Only</i></a> </li> <li> <a href="#" onclick="shows1($(this).text())"><i class="fa fa-eye-slash">Deny Access</i></a> </li> </ul> </div> </div>
function shows1(a) { if (a=="Full AccessRead"){ $("#dropdownMenu2").removeClass(); $("#dropdownMenu2").addClass("fa fa-pencil"); }else if(a=="Read Only"){ $("#dropdownMenu2").removeClass(); $("#dropdownMenu2").addClass("fa fa-eye"); }else if(a=="Deny Access"){ $("#dropdownMenu2").removeClass(); $("#dropdownMenu2").addClass("fa fa-eye-slash"); } // $('.buttonText').text(a) }
相關推薦
bootstrap實現下拉框dropdown選中select option 美爆了
bootstrap 官網的例子有點坑,它只給你下拉,並且美化了,但你點選下拉卻不能選擇,這個坎就已經讓一大堆人不想用它下拉框了,但原生的下拉框在每個瀏覽器長的的不一樣,尤其是在ie太醜,好了廢話不多說直接上程式碼;<div id="addgroups" class="b
bootstrap實現下拉框select option 美爆了
bootstrap 官網的例子有點坑,它只給你下拉並且美化了但你點選下拉卻不能選擇,這個坎就已經讓一大堆人不想用它下拉框了, 但原生的下拉框在每個瀏覽器長的的不一樣,尤其是在ie太醜,好了廢話不多說直接上程式碼; <!DOCTYPE html><html><head>
js實現下拉框聯動選中日期(select 日期聯動更改)
html程式碼 <head> <script type="text/javascript" src="/js/jquery-1.11.1.min.js" ></script> <script type="text/javascr
bootstrap-select外掛實現下拉框搜尋功能
工作上要用到在下拉框內實現搜尋功能,原生的select標籤是不能輸入的,所以最終找到了bootstrap-select外掛,功能十分強大,支援搜尋,多選,分組選中等。 本文摘取自: 官方文件 簡單示例 下面先附上我的程式碼,實現了搜尋功能,
bootstrap-select 搜尋下拉框 獲取選中值
<select id="id_reconciliationDate" class="selectpicker show-tick form-control" data-live-search="true" name="reconciliationDate" data-rul
select下拉框預設選中selected屬性不起作用
問題: 問題:使用select寫的下拉選單對預設選選中的option項設定selected="selected"屬性,不起作用,沒有實現預設選中。 分析: 分析:使用谷歌瀏覽器開啟頁面時,selected="selected"預設選中事件有效。
bootstrap搜尋下拉框:bootstrap-select
在專案的開發中可能會遇到 這樣如下的需要 實現bootstrap搜尋下拉框,本文采用bootstrap-select外掛;bootstrap-select外掛依賴jquery1.8+和bootstrap, <!DOCTYPE html> <html lan
select獲取下拉框的值 下拉框預設選中
本文主要介紹select下拉框的相關方法。1.通過id獲取下拉框的value和文字值例如: <select class="form-control" id="numbers"> <option value="1"&g
多個select下拉框,選中當前某一項,其他下拉框去掉選中的值
$(document).ready(function() { var oldvalue = ""; //上一次選中的值 var currentvalue = ""; //當前選中的值 $('.video_in select').each(fun
Layui:設定select下拉框自動選中某項
1. 需求場景分析 使用者需要更改某一項活動的資訊,活動資訊中包含需要用下拉框選擇的欄位A。在使用者點選進行修改彈出對話方塊的瞬間需要填補已有的活動資訊,自動選擇欄位A已經存在的值。 2. Layui的select下拉框是怎麼實現的 為了獲得一個select標配的下拉框
js實現下拉框模糊查詢
content body col con 下拉 gpo for lis OS keyup方法觸發模糊查詢 list : Array<any> //下拉列表所有內容 filtList:Array<any> //過濾後的內容 inputContent
angularJs實現下拉框多選
IV 幹貨 text 註意 解釋 config del 是你 CA 話不多說,直接上幹貨。 肯定需要下拉選插件。必須引入的是 註意 先後順序 select2.css select2-bootstrap.css select2.min.js angular.mi
下拉框處理(select)
mds 對象 鏈接 分享圖片 自動化測試 導入 class 分享 clas 轉:http://www.imdsx.cn/index.php/2017/12/04/select/ 在UI自動化測試過程中,經常會遇到一些下拉框,我們有三種可選方式來操作下拉框。 第一種方法
JQuery的validate驗證時 如何驗證下拉框是否選中
red select標簽 NPU mage 隱藏 分享圖片 img .com inpu 校驗下拉框是否選中,可以在校驗規則上添加 ignore: "", 即可對隱藏input添加校驗 ,也可以在select標簽上添加 requred="true" 此時只會提示必選字段
DJANGO實現下拉框的二級聯動
環境:PYTHON2.7+DJANGO1.9 有資料表如下,就是想在每次下拉框選擇dnsname欄位的時候,帶出對應的hostipaddr欄位 實現如下 models.py from __future__ import unicode_literals from django
bootstrap selectpicker 下拉框使用詳解
bootstrap selectpicker是bootstrap裡比較簡單的一個下拉框的元件,先看效果如下: 附上官網api連結,http://silviomoreto.github.io/bootstrap-select/. 拉框的使用上基本操作一般是:單選、
微信小程式如何實現下拉框效果?(程式碼示例)
wxml程式碼: <view class='top-text'> 選擇接收班級</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <
select下拉框資料回顯,option去重
select下拉框資料回顯: 方法1 document.getElementById("province").value="${province}"; document.getElementById("province").options[${province}].s
multiselect實現下拉框條件檢索、支援多選、單選
<!DOCTYPE html> <html> <head> <title>Bootstrap Multiselect</title> &nbs
easyui中一個頁面多個combobox下拉框載入同一json資料,下拉框無法選中問題
版本問題,可以通過升級easyui為最新版本解決,也可以通過以下程式碼處理/** * 初始化下拉框 * @param unitid dom元素id * @param value 初始化選中值 * @param data json資料集合 */ function in