用文本输入填充选择输入 [英] Fill select input with a text input

问题描述

目前，我有一个Web应用程序，它本身不支持多重选择，这会导致我的设计出现一些问题.因此，我试图做的是创建一个多选，并创建一个jquery脚本以基于文本输入填充多选.以下是我目前正在做的事情的链接，它可以工作，但一次只能选择1个.我需要它，以便如果用户键入test1，test2，test3，则选择所有这三个选项.任何帮助将不胜感激.

At the moment I have a web application that dosen't support multi selects natively and is causing some issues with my design. So what I am attempting to do is create a multi select and creating a jquery script to fill a multi select based on a text input. Below is a link of what I have going at the moment and it works but only for 1 selection at a time. I need it so that if a users types in test1,test2,test3 all 3 of those options are selected. Any help would be appreciated on this.

http://jsfiddle.net/C83DB/11/

selectOptions = {
   test1: ["test1"],
   test2: ["test2"],
   test3: ["test3"] 
}



$('#input').change(function() {
   if(selectOptions[$(this).val()]) { // does the option have an entry for the value of the textarea?
       $.each(selectOptions[$(this).val()], function() { // for each array item do
           $('#sel').append('<option>' + this + '</option>'); // append an option tag for the array item
       });
   }
});

推荐答案

一个更好的解决方案.

    <input type='text' id='txt'>
    <select multiple id='sel'>
     <option value='test1'> test1 </option>
     <option value='test2'> test2 </option>
     <option value='test3'> test3 </option>
     <option value='test4'> test4 </option>
     <option value='test5'> test5 </option>
     <option value='test6'> test6 </option>
    </select>

<script>
      $("#txt").change(function(){
        $("#sel").val($(this).val().split(","))
      });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type='text' id='txt'>
		<select multiple id='sel'>
		 <option value='test1'> test1 </option>
		 <option value='test2'> test2 </option>
		 <option value='test3'> test3 </option>
		 <option value='test4'> test4 </option>
		 <option value='test5'> test5 </option>
		 <option value='test6'> test6 </option>
		</select>

<script>
	  $("#txt").change(function(){
		$("#sel").val($(this).val().split(","))
	  });
</script>

这篇关于用文本输入填充选择输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！