设置文本值中选择二

我使用选择二（经由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 
     });

在以后的某个时候，我希望通过编程选择“中流砥柱电器”。我可以选择是否知道该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' } 
     });

...但是这给一个JavaScript错误a.ID是不确定的。

除了通过myData的数组循环，以获得ID，并使用它，有没有办法只有通过文本（即“中流砥柱电气”）？

感谢

来源

2017-07-18 user1009073

一个简单的例子，如果你选择的文本都是独特的，用这个可以返回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>

来源

2017-07-18 14:22:16

丹尼尔 - 这工作，但我觉得这是一个警告...我选择2控制中心有7000个的商家名称。您在示例中使用了CONTAINS功能。这基本上是一个子字符串函数。如果我正在寻找'琼斯电器'，这将首先与贝克琼斯电气公司'相匹配。是否有EQUALS或EXACT MATCH功能，而不是CONTAINS？ – user1009073

@ user1009073 ok。使用像'getOptId'这样的函数，它将搜索下拉列表并获取id，这种方式完全匹配 –

@ user1009073查看更新的代码，选项4是最后一个，之前有两个类似的选项。 –

设置文本值中选择二

回答

相关问题