CODEWITHSUNDEEP
javascriptphpjqueryhtml
Daniel Ellison
Daniel Ellison

Reputation: 1347

Fill select input with a text input

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

Upvotes: 0

Views: 214

Answers (3)

Tintu C Raju
Tintu C Raju

Reputation: 2700

A Better Solution for the same.

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

Upvotes: 0

varad mayee
varad mayee

Reputation: 619

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

});

Upvotes: 1

elas
elas

Reputation: 815

I splited and trimmed the text in the input field, so that an input like "test1, test2,test3" is translated into the values "test1", "test2" and "test3". For each we do a check in the selectOption object

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

Upvotes: 0

Related Questions