Question

我有一个select选项，它使用select 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，选择2应触发选择此选项 <option value="1" data-width="8" data-length="4" >Fourth</option>

谢谢您的帮助。

Answer 1

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

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

Answer 2

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

请参见下面的工作片段：

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

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

2 个答案: