Question

我是jquery学习者。

<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

我根据某些服务器数据动态设置数据类型值。单击按钮选项时，必须选择其值等于数据类型值

此处数据类型值为test1和test2，因此必须在点击按钮时选择test1和test2

注意：数据类型值可以有两个单词值，如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

你可以这样做：

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

检查http://jsfiddle.net/alaminopu/V85Vx/23/

Answer 3

使用.filter()功能获取目标option代码，然后选择它。

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

Jquery：单击按钮选择下拉选项

3 个答案: