在Select2中设置文本值 [英] Setting text value in Select2

问题描述

我正在使用Select2(通过CDN/最新版本)，并从数组中加载数据.(请注意，数据是通过AJAX/JSON提取的，但是由于某些特殊情况，它是通过数组加载的.)我需要以编程方式通过文本而非ID来选择一个值.我可以通过ID来使它工作，但不能通过文本来工作.虽然我可以手动遍历数组，确定ID，然后从ID中选择，但我认为还有一种更优雅的方法...

I am using Select2 (via CDN / latest version) with data loaded from an array. (Note that data is pulled via AJAX/JSON, but due to some unusual circumstances, this is loaded via an array.) I need to programmatically select a value via text, not an ID. I can get this to work via an ID, but not text. While I can manually loop through the array, and determine the ID, and select from the ID, I would assume that there is a more elegant way...

这是一些代码片段...

Here are some code fragments...

// 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
         });

稍后，我想以编程方式选择"Mainstay Electric".我可以选择是否知道ID，但是如果我只知道文本，则找不到方法.

At some later point, I want to programatically select 'Mainstay Electric'. I can select if I know the ID, but cannot find how to select if I just know the text.

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

//.. but not this  

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

在审查其他问题时，我发现我修改了这个示例...

In reviewing other questions, I found this example I modified...

 $(".mySelect").select2("trigger", "select", {
         data: { text: 'Mainstay Electric' }
         });

...但是这会导致JavaScript错误，即a.ID未定义.

...but this gives a JavaScript error that a.ID is undefined.

除了循环遍历myData数组以获取ID和使用ID外，还有没有一种方法可以仅传递文本(即"Mainstay Electric")?

Other than looping through the myData array to get the ID and use it, is there a way to just pass the text (i.e. the 'Mainstay Electric')?

谢谢

推荐答案

一个简单的示例，如果您的选项文本是唯一的，并且使用此文本可以为您返回ID:

A simple example, if your option text is unique and using this could return the id for you:

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

然后致电

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

通过文本选择它并调用触发更改以便将其选中.

to select it by text and call trigger change so it is selected.

要获得完全匹配，只需添加一个函数 getOptId 即可获得ID(如果提供了文本).

To get the exact match just add a function getOptId to get the id if text provided.

// 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中设置文本值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！