1. 程式人生 > >關於jquery.chosen,js下拉框外掛動態新增option

關於jquery.chosen,js下拉框外掛動態新增option

 function getCityData(city, scProvinceId) {
        var obj = document.getElementById("scCity");
        if (scProvinceId != '') {
            $.ajax({
                url: "<%=basePath%>driverSchool/getCitiesByProvince",
                type: 'post',
                data: {
                    "provinceId": scProvinceId },
                async: true,
                success: function (data) {
                    if (data.length > 0) {
                        $.each(data, function (index, e) {
                            if (city == e.city) {
                                obj.add(new Option(e.city, e.city, true, true));
                            } else {
                                obj.add(new Option(e.city, e.city));
                            }
                        });
                        $("#scCity").trigger("chosen:updated");
                        $("#scCity").chosen();
                    }
                }
            });
        }
    }
<select class="chzn-select" name="scCity" id="scCity"  data-placeholder="請選擇城市"   style="vertical-align:top;width: 75%">  <option label='請選擇城市'></option> </select>

功能:通過省份Id獲取該省份的市區資訊,並動態生成市區下拉框。

其中:

       obj.add(new Option(e.city, e.city, true, true));

第一個true,表示選中(selected),第二個true,表示有效。如果你只寫了第一個true,該option不會有反應的。

 $("#scCity").trigger("chosen:updated");

 $("#scCity").chosen();

這兩句很重要,如果你不加,option根本就添不進去。在我之前寫聯動時,用的是

 $("#scCity").trigger("liszt:updated");

 $("#scCity").chosen();

但是不知為什麼就是沒有反應,後來查資料,才發現後面的寫法是舊版的,改成上面的寫法就好了。

現在我們再說說scCity下拉框的模糊查詢。chosen預設從第一個字元搜尋,你直接輸入中間的字元,是搜尋不到的。

 $(".chzn-select").chosen({   
     search_contains: true
 });

加入該句後,


 

相關推薦

關於jquery.chosen,js外掛動態新增option

function getCityData(city, scProvinceId) { var obj = document.getElementById("scCity"); if (scProvinceId != '') {

jQuery的select2的搜尋功能(使用select2外掛,方便簡單)

第一步: 引入我們用使用的外掛 jquery: select2: css: js: 第二步: 建立一個html頁面,body內容: <div> <select class="singleSelect" style="width: 200px;">

jquery操作select的多種方法(選中,取值,賦值等

console 多選框 bus move dso rul 調用 define @value http://wenku.baidu.com/link?url=9N4HzvSx12pi4naZfs-Cf7P6MPteTuOoINlfInCJJPr1Tx2QtW7iY_7J_g0

jquery操作select的多種方法(選中,取值,賦值等)

單選框 很多 輸出 checked ref mov define text Language Query獲取Select選擇的Text和Value: 語法解釋: 1. $("#select_id").change(function(){//code...}); //為S

angular.js 選中 根據後臺返回值

tro script rip pre 後臺 根據 length -o lec 前景,根據後臺返回值選中某個項 <!DOCTYPE html><html><head> <meta charset="utf-8"> &

getJSON獲取JSON文件加載動態驗證比輸入項

func div one 3-0 cli info set ima -s 1.html界面 <form action="" method="get"> <div class="form-group">

layui後臺動態賦值

前臺頁面: <select name="xm" id="xm" lay-verify="required" lay-filter="xmFilter"> <option value=""></option> </select> 前臺js:  &

判斷Js是否為空

function isEmpty(obj){             if(typeof obj == "undefined" || obj == null || obj == ""){    &

js之select2.js

1、讓select2.js生效除了引用其CSS和js外,在使用的時候對下拉框進行引用。 $("#select2").select2({ placeholder:"請選擇", minimumResultsForSearch: -1,(設定下拉框的搜尋框不顯示) l

Jquery獲取日期內容後計算出相應年齡顯示在input輸入

  這個就類似於QQ等軟體填寫個人資訊處的生日後年齡就會自動被計算出。 思路:         監聽下拉框內容的改變         1、設定年齡的輸入框不可編輯,我為了讓其以後能往後臺傳輸資料

jQuery easyUI combobox 聯動 級聯

新做了一個下拉框聯動的小功能,網上找的是省市級聯,之前也套用了,這次是自定義的一個級聯,相當於父子關係,有如下兩張表: 表A: (分類表)(相當於主選單) 表B: (目錄表)(相當於子選單) 注

jQuery選擇一個選項另一下改變值

function gradeChange(){ //這個函式是要改變值下拉框的改變事件 $("#hehe").html(""); //這個意思是每次選擇前先把另一個下拉框清空 var fangqu = $(".type-sel").val();

基於JQuery的Select聯動(級聯)

這段時間在指導學生完成實訓專案,由一個用到了JQuery進行下拉框(select)聯動(新增刪除option)的操作,本來在上課中都是講過的,但時間一長都忘光了,下面把這段簡單的JS貼出來,給入門者一個DEMO吧,以後有學生不會寫的時候他能到這找到參考。 程式碼要點: 1、

兩種動態動態預設選擇

  第一種:  action: HttpServletRequest request = ServletActionContext.getRequest(); this.dwList = this.xlcjDao.findAllByKdm(this.dwdm); jsp

bootstrap-select搜尋外掛 動態載入自己資料的二級聯動

bootstrap-select是boot的下拉搜尋外掛,使用的時候有時我們需要動態從後臺 或者 直接載入動態資料。下面是根據一級下拉選單,動態載入二級聯動方式。首先引入js與css檔案(一個css兩個js)<link rel="stylesheet" href="cs

jQuery操作select的text值和value值的方法

1、jquery獲取當前選中select的text值  var checkText=$("#slc1").find("option:selected").text();  2、jquery獲取當前選中select的value值  var checkValue=$("#slc1").val();  3、jqu

[學習筆記]JS賦值

var FrustaNumber=FrustaNumbers.split(",");if(FrustaNumber.length>0){for(var i=0;i<FrustaNumber

jQuery如何設定顯示與隱藏

jQuery的 hide() 和 show() 方法分別用來隱藏和顯示 HTML 元素,而 toggle() 方法則可以切換 hide() 和 show() 方法,也就是顯示被隱藏的元素,並隱藏已顯示的元素。 1 2 3 $("select").hide

jQuery操作系列$("option:selected",this) &&(鋒利的jQuery

www. ont remove true this 下拉列表 val oct pre jQuery下拉框操作系列$("option:selected",this) &&(鋒利的jQuery) <!DOCTYPE html> <htm

【axure教程】選擇動態顯示結果

說實話,這個案例我是在UCD大社群看到的,不過都是英文,愣是硬著頭皮學習的,幸好英文底子+google。 1、案例效果圖 這個例子的效果是,使用者切換左邊的下拉框選項,右邊的提示文字會隨之變化。當選中的是圖書時,文字框中的文字是“請輸入圖書名稱或作者”;當選中音樂時