JQuery use input text to preselect dropdown box
仅具备基本的JQuery和Javascript知识,这真使我丧命。本质上,当在输入框中输入某些文本时,我希望下拉列表自动选择。
例如。" Foo"是" Category4"项,因此,如果有人在输入框中键入Foo,则选择框应自动选择选项19。" Bar"是" Category7"项,因此选择框应选择选项8,即有人在输入框中键入Bar。
之所以没有进行硬编码,是因为如果用户认为合适的话,他们仍然可以选择对这些项目进行重新分类。 IE。通常," Bar"是" Category7"项目,因此脚本应自动选择选项8,但用户可以通过在下拉框中手动选择将" Bar"更改为" Category1"项目,而脚本不应覆盖手动选择。
我仔细检查了下面的脚本,该脚本可以让我在输入框中键入类别的名称,并在下拉列表中进行填充,但是我无法继续进行下一步,将其与预定义响应列表,并使用该列表来填充下拉列表。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <p id="demo"></p> <input type="text" id="input" placeholder="input"> <select id="category"> <option value="categoryplaceholder">Category</option> <option value="5">Category1</option> <option value="22">Category2</option> <option value="3">Category3</option> <option value="19">Category4</option> <option value="23">Category5</option> <option value="25">Category6</option> <option value="8">Category7</option> </select> <input type="submit" value="submit"> |
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function() { $("#input").change(function() { var val = $("#input").val(); $("#category > option").each(function() { //Run through the loop of each option if (this.text.indexOf(val) >= 0) { //Find if the string present as substring $("#category > option").removeAttr("selected"); //Remove the existing selected option $(this).attr("selected","selected"); //Select this matching option as selected return false; //Return after first match is found } }); }); }); |
非常感谢您的帮助!
https://jsfiddle.net/chuckler/w52kfpcy/
您可以使用一个对象来保存您的单词及其类别
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(document).ready(function() { var Obj = [ { word : 'FOO', category : '19' }, { word : 'Bar', category : '8' }, ]; $("#input").on('change' , function() { var val = $("#input").val(); $.each(Obj , function(i , v){ if(v.word.toLowerCase().trim() == val.toLowerCase().trim()){ $('#category').val(v.category); return false; } }) }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <p id="demo"></p> <input type="text" id="input" placeholder="input"> <select id="category"> <option value="categoryplaceholder">Category</option> <option value="5">Category1</option> <option value="22">Category2</option> <option value="3">Category3</option> <option value="19">Category4</option> <option value="23">Category5</option> <option value="25">Category6</option> <option value="8">Category7</option> </select> <input type="submit" value="submit"> |
考虑:
-
聚焦
blur 之类的东西后,将触发输入.change 事件 -
使用
.text() 来使用选项文本而不是其值 -
使用
.trim() 删除左/右的所有空白 -
将
.toLowerCase() 用于区分大小写的字母 -
如果需要实时更改,可以使用
.on('input' , function(){....}) 代替.change()
可以使用jquery
有关更多详细信息,请单击此处
。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(document).ready(function() { var Obj = [ { word : 'FOO', category : '19' }, { word : 'Bar', category : '8' }, { word : 'Prashant', category : '25' }, ]; $("#input").on('change' , function() { var val = $("#input").val(); var oFindObj = Obj.find(x=>x.word.toLowerCase().trim()==$.trim(val.toLowerCase())); if(oFindObj!=undefined){ $("#category").val(oFindObj.category); } }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <p id="demo"></p> <input type="text" id="input" placeholder="input"> <select id="category"> <option value="categoryplaceholder">Category</option> <option value="5">Category1</option> <option value="22">Category2</option> <option value="3">Category3</option> <option value="19">Category4</option> <option value="23">Category5</option> <option value="25">Category6</option> <option value="8">Category7</option> </select> <input type="submit" value="submit"> |