Select2のテキスト値を設定する

Question

配列からデータを読み込んだSelect2（CDN /最新版）を使用しています。 （データはAJAX/JSONを介して取得されることに注意してください。しかし、これは異常な状況のため、配列を介してロードされます）プログラムでIDでなくテキストで値を選択する必要があります。私はこれをIDを介して動作させることができますが、テキストは使用できません。私は手動でできる配列をループし、IDを決定し、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 
     }); 

です

後で、「Mainstay Electric」をプログラムで選択したいと思っています。私はIDを知っているかどうかを選択できますが、テキストを知っているかどうかを選択する方法は見つけられません。他の質問を検討して

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

//.. but not this 

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

、私は私が...

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

を変更...しかし、これはa.IDが定義されていないJavaScriptエラーを与えるこの例を見つけました。

IDを取得して使用するためにmyData配列をループする以外に、テキスト（つまり 'Mainstay Electric'）を渡す方法はありますか？

おかげ

Answer 1

簡単な例、あなたのオプションのテキストはユニークで、これはあなたのためのIDを返すことができる使用している場合：

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

は、それを選択するために、

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

を呼び出しますテキストと呼出しトリガの変更によって選択されます。

完全一致を得るには、提供されたテキストIDを取得するために関数getOptIdを追加するだけです。

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