【问题标题】:How to search a long dropdown option / select list?如何搜索长下拉选项/选择列表?
【发布时间】:2016-03-01 13:07:07
【问题描述】:

我目前正在制作一个使用 jquery 插件 ddslick 制作图像下拉列表的网站。我选择练习状态,我想知道如何使用 jquery 来搜索它,因为它是一个插件?

<div id="myDropdown"></div>
<select id="states" name="states" class="custom-select">
     <option value="1" data-imagesrc="stateflags/compass.png" id="va"  data-description="Choose your destination" > Explore</option>
     <option value="2" data-imagesrc="stateflags/ak.png" id= "nc" data-description="Alaska"> Alaska </option>
     <option value="3" data-imagesrc="stateflags/az.png" id= "nc" data-description="Arizona"> Arizona </option>
     <option value="4" data-imagesrc="stateflags/ar.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="5" data-imagesrc="stateflags/ca.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="6" data-imagesrc="stateflags/co.png" id= "nc" data-description="formRegister"> North Carolina </option>
     <option value="7" data-imagesrc="stateflags/ct.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="8" data-imagesrc="stateflags/de.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="9" data-imagesrc="stateflags/fl.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="10" data-imagesrc="stateflags/ga.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="11" data-imagesrc="stateflags/hi.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="12" data-imagesrc="stateflags/id.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="13" data-imagesrc="stateflags/il.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="14" data-imagesrc="stateflags/in.png" id= "nc" data-description="North Carolina"> Indiana </option>
     <option value="15" data-imagesrc="stateflags/ia.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="16" data-imagesrc="stateflags/ks.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="17" data-imagesrc="stateflags/ky.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="18" data-imagesrc="stateflags/la.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="19" data-imagesrc="stateflags/me.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="20" data-imagesrc="stateflags/md.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="21" data-imagesrc="stateflags/ma.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="22" data-imagesrc="stateflags/mi.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="23" data-imagesrc="stateflags/mn.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="24" data-imagesrc="stateflags/ms.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="25" data-imagesrc="stateflags/mo.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="26" data-imagesrc="stateflags/mt.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="27" data-imagesrc="stateflags/ne.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="28" data-imagesrc="stateflags/nv.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="29" data-imagesrc="stateflags/nh.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="30" data-imagesrc="stateflags/nj.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="31" data-imagesrc="stateflags/nm.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="32" data-imagesrc="stateflags/ny.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="33" data-imagesrc="stateflags/nc.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="34" data-imagesrc="stateflags/nd.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="35" data-imagesrc="stateflags/oh.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="36" data-imagesrc="stateflags/ok.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="37" data-imagesrc="stateflags/or.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="38" data-imagesrc="stateflags/ri.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="39" data-imagesrc="stateflags/sc.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="40" data-imagesrc="stateflags/sd.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="41" data-imagesrc="stateflags/tn.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="42" data-imagesrc="stateflags/tx.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="43" data-imagesrc="stateflags/ut.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="44" data-imagesrc="stateflags/vt.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="45" data-imagesrc="stateflags/va.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="46" data-imagesrc="stateflags/wa.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="47" data-imagesrc="stateflags/wv.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="48" data-imagesrc="stateflags/wi.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="49" data-imagesrc="stateflags/wy.png" id= "nc" data-description="North Carolina"> North Carolina </option>
</select>
<script type="text/javascript">
    $(document).ready( function(){
        $('#states').ddslick();
    });
</script>

【问题讨论】:

    标签: javascript jquery html search web


    【解决方案1】:

    据我所知,ddslick 不是用于过滤,它只是用于插入图像作为选项。

    我建议使用不同的插件 select2 并将 img 插入选项 Select2 add image icon to option dynamically

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-18
      • 1970-01-01
      • 2012-06-13
      • 1970-01-01
      • 2020-06-08
      • 1970-01-01
      相关资源
      最近更新 更多