1. 程式人生 > >jquery-editable-select使用 繫結動態資料篩選,並獲取value和txt

jquery-editable-select使用 繫結動態資料篩選,並獲取value和txt

這個外掛的原理是把多選框轉化為input 並把項列為ul>li的形式

<select id="i_CustomerId_ES" name="CustomerName"></select>


繫結動態資料,根據輸入篩選 並獲取value和txt

   1.初始化editable-select控制元件

  $('#i_CustomerId_ES').editableSelect().on('select.editable-select', function (e, dom) {
                //console.log(dom.val() + '' + dom.text());         
         });

    2.由於會解析成input 可以通過給input繫結keydown 或 input時間來監控輸入的目的:

   $('#i_CustomerId_ES).on('input', function (e) {
                bindSc($(this).val()); //呼叫獲取資料的方法
            });
    3.繫結資料:
  var bindSc = function (value) {
            var search = value;
            $.get('...', { search: search }, function (result) {
                $('#i_CustomerId_ES').editableSelect('clear');//清空現有資料
                $.each(result, function (i, t) {
                    $('#i_CustomerId_ES').editableSelect('add', function () {
                        $(this).val(t.Id);
                        $(this).text(t.Name);
                    });//呼叫add方法 通過函式的方式繫結上val和txt
                })
            })

以上。

重點方法:

.on('select.editable-select', function (e, dom) {}) //選擇後觸發
.editableSelect('clear');//清空現有資料
.editableSelect('add', function () {
                        $(this).val(t.Id);
                        $(this).text(t.Name);
                    });//add繫結新增上value txt

輸入之後會出現資料框消失的情況,只需將原始碼中的if (this.$list.find('li').length == hiddens) this.hide();註釋掉就好

相關推薦

jquery-editable-select使用 動態資料篩選獲取valuetxt

這個外掛的原理是把多選框轉化為input 並把項列為ul>li的形式<select id="i_CustomerId_ES" name="CustomerName"></select>繫結動態資料,根據輸入篩選 並獲取value和txt   1.

jquery on方法 動態元素 出現的問題

                之前使用 on 的時候一直是$("").on('click','function(){}')之後發現有些時候一直無法繫結(比如元素動態生成時),檢視文件後發現正確用法應該是$(document).on("change","#pageSize_out",function(){  

vue裡面v-bindProps 利用props動態資料

<add v-bind:子元件的值="父元件的屬性"></add> <divid="app">     <addv-bind:btn="h">&l

jQuery使用on()動態生成元素的事件無效的問題

jQuery的on()方法可以繫結動態生成元素的事件,但是在實際使用時發現無效。如下HTML: 1 2 3 <p> <a>123</a> </p> 使用如下方式,對靜態元素有效,但是繫結動態

dropdownlist控制元件如何動態資料

一、dropdownlist控制元件的值繫結方法: 1、直接輸入item項 <asp:DropDownList ID="DropDownList1" runat="server" >  <asp:ListItem>張三</asp:ListItem>  <asp:Li

HTM select資料庫資料

用ajax去後臺數據庫中訪問資料,操作select前臺jsjQuery.ajax({      type:"POST",      dataType:"json",      url:url,//訪問後臺去資料庫查詢select的選項      success:functi

將域名到ip上實現訪問不同二級子域名對應不同目錄

一、將域名繫結到ip上1、環境介紹:阿里雲伺服器ESC(美國矽谷)2、購買域名3、備案注:由於我買的是美國地區伺服器,所以不用備案,如果買的國內伺服器,這裡需要新增一個備案操作。4、域名實名認證5、將域名繫結到雲伺服器公網ip5.1、對購買的域名進行解析(點選解析按鈕)5.2

centos多網絡卡(匯聚)實現冗餘負載均衡

說明: 繫結多塊網絡卡為一個虛擬ip,類似csico的etherchannel,實現冗餘或負載均衡和增加頻寬的功能。 核心需要bonding的支援,察看是否掛在bonding,lsmod命令。預設2.6核心中bonding已經被編譯為M的選項,不需重新編譯核心。 其實Redhat關於bond,在kernel-

自定義RadioGroup動態新增RadioButton獲取選中radioButton的位置

一,自定義的radioGroup,根據專案需求,需要實現考試試卷中單選題形式,其中,在選項前面要有正確答案的提示,例如:(答案)A 選項內容    ,且前面(答案)隱藏,在返回上一題時,正確答案前的這個標誌會顯示出來,所以需要我們自定義控制元件繼承radiogroup,其中每

vue 資料-動態樣式

vue 資料繫結-動態樣式 動態class名繫結的幾種方式 1. 物件方式 new Vue({ el: '#root', template: `<div :class="{active: isActive"></div>`, data ()

jQuery動態元素的點選事件無效

示例如下: <div> <ul id="demo"> <li>Kubernetes:下一代分散式系統的護戒使者</li> <li>機器學習工具--Pandas cheat sheet</li> <li&g

jquery 動態html標籤事件

可以這樣理解,無論HTML內容是不是JS生成的,只要沒有跨域,所有頁面內的元素都屬於這個頁面,都能夠繫結事件,JS中有個非常重要的概念叫事件冒泡,簡單來講,就是子元素產生的事件,會一直冒泡到最頂級父元素,並能夠被父元素監測到。請看下圖: 事件冒泡   那麼,我能不能在被插

關於jquery事件on 如何動態生成的dom元素

今天遇到個問題,在table裡面動態更新資料,然後每一行會繫結相應的點選事件 我原本是想用 可作用於未來元素的on方法,但是實際上還是沒有起作用,程式碼如下: $(".form-table tbod

jQuery動態新增li標籤新增屬性事件

程式碼如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" contentType="text/h

WPF: WrapPanel 容器的資料(動態生成控制元件、遍歷)

問題:        有一些CheckBox需要作為選項新增到頁面上,但是數目不定。而為了方便排版,我選擇用WrapPanel面板來作為父容器。那現在的問題就是如何把這些控制元件新增到這個WrapPanel裡了。我想到了兩個方法,第一個是先得到控制元件數目,然後再動態生成並

echarts動態地圖資料(使用立即執行函式或者變數賦值都可以唯一要求賦值的是物件而不是字串)

@{    Layout = null;}<html lang="en"><head>    <meta charset="utf-8">    <title>ECharts</title></head&g

jquery.editable-select.js使用文件

<select id="SCName" class="next-input-scnst" style="width: 200px;">   <option value="double">double</option>   <option value="preci

jQuery的onclick直接click區別

狀況之外 在之前的公司並沒有遇到這個問題,也就沒有深究。直到自己換了現在的公司,剛來第二天就開始寫別人寫到一半的專案,很無奈,不是原生就是jquery,由於專案急,已經來不及切換框架重新佈局,只能繼續了。 狀況之中 到處都是列表,到處都是js建立的動態頁面,好吧,那我也繼續吧,突然,意外發生了

jQuery兩種事件

jQuery兩種繫結事件方式 1.eventName(fn),   js部分事件沒有實現 2.on("eventName",fn)   js所有的事件都實現了 <html> <head> <title></title> <

jquery帶引數事件 bind(type,[data],fn)

bind 方法為每個選擇的元素事件繫結函式 語法格式:bind(type,[data],fn) 其中引數type為一個或多個型別字串引數,type引數選擇範圍如下: blur,focus,load,scroll,unload,click, dbclick,mousedown,mouseup,mous