Question

我正在使用Select2（通过CDN /最新版本）从数组加载数据。（请注意，数据是通过AJAX / JSON提取的，但是由于某些异常情况，这是通过数组加载的。）我需要以编程方式通过文本而不是ID来选择值。我可以通过ID，但不是文本来工作。虽然我可以手动循环遍历数组，并确定ID，并从ID中选择，但我会假设有更优雅的方式......

以下是一些代码片段......

reset()

稍后，我想以编程方式选择“Mainstay Electric”。如果我知道ID，我可以选择，但如果我只知道文本，则无法找到如何选择。

// Now load all the elements into the array, which comes from AJAX
         for (i = 0; i < rowCount; i++) {                      
         myData.push({id: i, text: comp_data.rows[i].NN_NAME});                     
         }   

        // create my Select2 control           
        var $mySelectControl =  $(".mySelect").select2({
            data: myData,
            width:300,
            placeholder: "Select an account",
            allowClear: true
         });

在回顾其他问题时，我发现这个例子我修改了......

// THIS WORKS
    $(".mySelect").val(null).trigger("change");

//.. but not this  

 $(".mySelect").val('Mainstay Electric').trigger("change");

...但是这会产生一个JavaScript错误，即a.ID未定义。

除了循环访问myData数组以获取ID并使用它之外，还有一种方法可以传递文本（即'Mainstay Electric'）吗？

由于

Answer 1

一个简单的例子，如果你的选项文本是唯一的，那么使用它可以为你返回id：

$("#test_id option:contains('Option 4')").val()

然后致电

$('#test_id').val($("#test_id option:contains('Option 4')").val()).change();

通过文本选择它并调用触发器更改以便选择它。

要获得完全匹配，只需添加一个函数getOptId即可获取所提供文本的ID。

// Grade
$('#test_id').select2({
  width: '200px',
  data: [],
});



$('#text_btn').click(function() {
  $('#test_id').val(getOptId('Option 4')).change();
});


function getOptId(text) {
  let id = '';
  $('#test_id').find('*').filter(function() {
    if ($(this).text() === text) {
      id = $(this).val();
    }
  });
  return id;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<div>
  <select id="test_id">
        <option></option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4 TEST</option>
        <option value="5">Option 4 This is 5</option>
        <option value="6">Option 4</option>
    </select>
</div>
<br>
<button id="text_btn">Select Option 4</button>

在Select2中设置文本值

1 个答案: