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

Jquery : On clicking the button select drop down option

本文关键字：选项 选择 按钮 单击 Jquery      更新时间：2023-09-26

我是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此处

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

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

注意：数据类型值可以有两个单词值，如test，option text可以进行测试

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

您可以这样做：

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

使用.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);
   });   
});

演示

相关文章：