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

Question

我有一个选择选项，它使用像这样的选择 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。

专家结果：

当用户键入 true customWidth 和 customLength 时 select2 触发 更改选定的值。示例：customWidth = 8 和 customLength = 4、select 2应该是trigger选中了这个选项 <option value="1" data-width="8" data-length="4" >Fourth</option>

感谢您的帮助。

Answer 1

您可以通过data attribute 找到具有相同宽度和长度的选项来实现此目的，如果找到，则选择它然后触发更改，以便 slect2 采用新的 val 。

请参阅下面的工作 sn-p ：

$(function() {

  $customWidth = $("#customwidth");
  $customLength = $("#customlength");

  $customWidth.on("input", function(e) {
    if( $customLength.val() && this.value ) {
    var el = $("#temp").find('option[data-width=' + this.value + '][data-length=' +  $customLength.val() + ']');
      if (el.length > 0)
        el.attr('selected', 'selected').trigger("change");
    }
  });

  $customLength.on("input", function(e) {
    if( $customWidth.val() && this.value ) {
    var el = $("#temp").find('option[data-width=' + $customWidth.val() + '][data-length=' + this.value + ']');
    if (el.length > 0)
      el.attr('selected', 'selected').trigger("change");
    }
  });

  $('#temp').select2({
    placeholder: 'Select'
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

customWidth : <input id="customwidth" /><br/><br/> customLength : <input id="customlength" /><br/><br/>

<select id="temp" style="width: 300px">
  <option></option>
  <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>

Answer 2

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

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

JQUERY

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