用文本输入填充选择输入

Question

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

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>

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

Answer 3

我在输入字段中拆分并修剪了文本，以便将“ test1，test2，test3”之类的输入转换为值“ test1”，“ test2”和“ test3”。 对于每个，我们都检查一下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>');
            });
        }
    })
});