可搜索的选择选项 [英] Searchable select option
本文介绍了可搜索的选择选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否有将select选项设置为selectable/autocomplete/searchable的选项?不幸的是,我无法更改表格.所以我不能将选择选项更改为文本字段.但我能够访问CSS和javascript..
Is there anyway to make select option as selectable/auto complete/searchable? unfortunately i cannot change the form. so i cannot change the select option into text field. but i be able to access the css and javascript..
下面是选择选项.
<select name="siteID" id="siteID" class="abcd" style="width:100%" />
<option value='0' selected='true'> Not associated to any Circuit ID </option>
<option value='2101' > 1007345136 </option>
<option value='2102' > 1007921321 </option>
<option value='2103' > 1007987235 </option>
<option value='2407' > 132 </option>
<option value='2408' > 141 </option>
<option value='2409' > 142 </option>
<option value='2410' > 145 </option>
<option value='2701' > 225 </option>
<option value='2702' > 248 </option>
<option value='2703' > 251 </option>
<option value='2704' > 254 </option>
<option value='2705' > 264 </option>
<option value='1804' > 27 </option>
<option value='2706' > 274 </option>
<option value='2707' > 310 </option>
<option value='2708' > 311 </option>
<option value='3001' > 333 </option>
<option value='2401' > 38 </option>
<option value='2402' > 64 </option>
<option value='2403' > 68 </option>
<option value='2404' > 69 </option>
<option value='2405' > 76 </option>
<option value='2406' > 81 </option>
<option value='2411' > abc123post </option>
<option value='3301' > circuit id 50 </option>
<option value='2105' > fadhil </option>
<option value='2104' > faisal </option>
<option value='3002' > IPEN - SITE TEST </option>
<option value='3601' > Manual Circuit ID </option>
<option value='3302' > new circuit id fadhil </option>
<option value='1809' > try iframe </option>
</select>
是否有任何javascript/jquery和css可以将其转换为可插入形式.
is there any javascript/jquery and css that can transform it as serchable.
推荐答案
您可以考虑使用名为 Select2 一个>.您无法自动关闭<select>
标签!您可以通过以下方式使用它:
You may consider using a jQuery plugin called Select2. You cannot self-close a <select>
tag! You can just use it this way:
$(function () {
$("select").select2();
});
@import url(https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<select name="siteID" id="siteID" class="abcd" style="width:100%">
<option value='0' selected='true'> Not associated to any Circuit ID </option>
<option value='2101' > 1007345136 </option>
<option value='2102' > 1007921321 </option>
<option value='2103' > 1007987235 </option>
<option value='2407' > 132 </option>
<option value='2408' > 141 </option>
<option value='2409' > 142 </option>
<option value='2410' > 145 </option>
<option value='2701' > 225 </option>
<option value='2702' > 248 </option>
<option value='2703' > 251 </option>
<option value='2704' > 254 </option>
<option value='2705' > 264 </option>
<option value='1804' > 27 </option>
<option value='2706' > 274 </option>
<option value='2707' > 310 </option>
<option value='2708' > 311 </option>
<option value='3001' > 333 </option>
<option value='2401' > 38 </option>
<option value='2402' > 64 </option>
<option value='2403' > 68 </option>
<option value='2404' > 69 </option>
<option value='2405' > 76 </option>
<option value='2406' > 81 </option>
<option value='2411' > abc123post </option>
<option value='3301' > circuit id 50 </option>
<option value='2105' > fadhil </option>
<option value='2104' > faisal </option>
<option value='3002' > IPEN - SITE TEST </option>
<option value='3601' > Manual Circuit ID </option>
<option value='3302' > new circuit id fadhil </option>
<option value='1809' > try iframe </option>
</select>
这篇关于可搜索的选择选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文