jQuery：单击按钮后，选择下拉选项

Question

I am jquery learner.

<select multiple id="update-select" data-type="test1, test2">
        <option value="3">test1</option>
        <option value="4">test2</option>
        <option value="5">test3 test</option>
        <option value="5">test test</option>
</select>

<input type="button" id ="btn" value ="click me">


$(document).ready(function() {
   $("#btn").click(function(){

   });   
});

jsfiddle here

I am setting the data-type value dynamically based on some server data. on clicking the button option whose value equal to data-type value must be selected

Here data-type values are test1 and test2 so option test1 , and test2 must be selected on clicking the button

Note: data-type values can have two word values like test test, option text also can have test test

Answer 1

$(document).ready(function() {
   $("#btn").on('click', function(){
       $('#update-select option').prop('selected', false);
       $.each($('#update-select').data('type').split(','), function(i, opt) {
           $('#update-select option:contains('+ $.trim(opt) +')').prop('selected', true);
       });
   });   
});

FIDDLE

Answer 2

You can do like this:

$(document).ready(function() {
    $("#btn").click(function(){
         $('#update-select option').prop('selected', false);
        var select = $("#update-select").attr('data-type').split(',');
        for(var i=0; i<select.length; i++){
           $('#update-select option:contains('+ $.trim(select[i]) +')').prop('selected', true);   
        }
    });   
});

check http://jsfiddle.net/alaminopu/V85Vx/23/

Answer 3

Use .filter() function to get your target option tags and select it afterwards.

$(document).ready(function() {
   $("#btn").click(function(){  

       var xText =$('#update-select').data('type');

       $('#update-select option').filter(function(){
           return xText.indexOf($(this).text()) != -1;   
       }).prop('selected', true);

   });   
});

DEMO