时间戳

首页 > 解决方案 > 自定义属性选择 2 的触发器更改

javascript - 自定义属性选择 2 的触发器更改

问题描述

我有一个选择选项，它使用这样的选择 2 插件

<select id ="temp">
    <option value="1" data-width="24" data-length="12">First</option>
    <option value="3" data-width="32" data-length="24" >Second</option>
    <option value="1" data-width="16" data-length="16" >Third</option>
    <option value="1" data-width="8" data-length="4" >Fourth</option>
</select>

我想从键盘的用户输入中获取数据宽度和长度。我称它们为customWidth和customLength。

专家结果：

当用户键入 truecustomWidth并customLengthselect2 触发更改选定值时。示例：customWidth= 8 and customLength= 4, select 2 应该是触发选择了这个选项 <option value="1" data-width="8" data-length="4" >Fourth</option>

谢谢你的帮助。

标签： javascriptjqueryjquery-select2

解决方案

这仅适用于宽度。也尝试自己实现长度。

HTML

<select id ="temp">
<option value="1" data-width="24" data-length="12">First</option>
<option value="3" data-width="32" data-length="24" >Second</option>
<option value="1" data-width="16" data-length="16" >Third</option>
<option value="1" data-width="8" data-length="4" >Fourth</option>
</select>

<input type="text" id="width">

查询

$('#temp').select2({

});

$('#width').keyup(function(){
var widthVal= $(this).val()

  $("#temp option").each(function(){        
    if($(this).attr('data-width')==widthVal){   
      $('#temp option[data-width="'+widthVal+'"]').prop('selected','selected').change()     
    }  
  })  
})

推荐阅读