Définition de la valeur de texte dans Select2

Question

J'utilise Select2 (via CDN/version la plus récente) avec des données chargées à partir d'un tableau. (Notez que les données sont extraites via AJAX/JSON, mais en raison de circonstances inhabituelles, elles sont chargées via un tableau.) Je dois sélectionner par programme une valeur via le texte, pas un ID. Je peux obtenir cela pour travailler via un ID, mais pas de texte. Alors que je peux boucle manuellement à travers le réseau, et déterminer l'ID, et sélectionnez l'ID, je suppose qu'il ya une façon plus élégante ...

Voici quelques fragments de code ...

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

À un moment ultérieur, je souhaite sélectionner par programme «Mainstay Electric». Je peux sélectionner si je connais l'ID, mais ne peux pas trouver comment sélectionner si je connais juste le texte.

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

//.. but not this 

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

Lors de l'examen d'autres questions, je trouve cet exemple, je ... modifié

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

... mais cela donne une erreur JavaScript a.ID est définie.

En dehors de la boucle du tableau myData pour obtenir l'ID et l'utiliser, y a-t-il un moyen de simplement passer le texte (à savoir le 'Mainstay Electric')?

Merci

Answer 1

Un exemple simple, si votre texte option est unique et en utilisant cela pourrait retourner l'id pour vous:

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

puis appelez

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

pour le sélectionner par le texte et le changement de déclenchement d'appel afin qu'il soit sélectionné.

Pour obtenir la correspondance exacte, ajoutez simplement une fonction getOptId pour obtenir l'ID si le texte est fourni.

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