Question

目前，我有一个Web应用程序，它本身支持多选，并且导致我的设计出现一些问题。所以我试图做的是创建一个多选并创建一个jquery脚本来填充基于文本输入的多选。下面是我现在所处的内容的链接，它可以工作，但一次只能进行1次选择。我需要它，以便如果用户键入test1，test2，test3，则选择所有这3个选项。任何帮助都将在此得到赞赏。

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
       });
   }
});

Answer 1

I trimmed input field and splited it

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

    $('#input').change(function() 
{
        //getting all values seperated by","
        var values = $(this).val().split(",");
        values = $.map(values, function(elem) {return elem.trim()});
        $.each(values, function(i, value) 
        {
            if(selectOptions[value]) 
            {
                $.each(selectOptions[value], function() 
                 { 
                   //append the option tag
                    $('#sel').append('<option>' + this + '</option>');
                });
            }
        })

});

Answer 2

更好的解决方案。

    <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>

＆＃13;

<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>

＆＃13;

Answer 3

我在输入字段中拆分并修剪了文本，以便输入像＆＃34; test1，test2，test3＆＃34;被翻译成值＆＃34; test1＆＃34;，＆＃34; test2＆＃34;和＆＃34; test3＆＃34;。对于每一个，我们检查selectOption对象

http://jsfiddle.net/dzda0xvL/3/

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

$('#input').change(function() {
    // get all values splited by "," 
    var values = $(this).val().split(",");
    // remove blank space before and after each values 
    values = $.map(values, function(elem) {return elem.trim()});
    // for each value
    $.each(values, function(i, value) {
        // does the option have an entry for the value?
        if(selectOptions[value]) {
            // for each array item do
            $.each(selectOptions[value], function() { 
                // append an option tag for the array item
                $('#sel').append('<option>' + this + '</option>');
            });
        }
    })
});

使用文本输入填充选择输入

3 个答案: