如何使用变量的内容而不是ID来选择下拉列表中的项？

Question

我有一个包含以下项目的下拉列表：

东开普省，ID =1豪登省，ID =2 KwaZulu Natal，ID 3姆普马兰加，ID 4

我也有一个名为省份的变量。例如，如果我将东开普省放在变量中，并使用以下代码选择东开普省，它不会被选中。

var provinces = "Eastern Cape";
$("#Province").val(provinces); 

但是当我使用下面的代码时，会选择东开普省。

var provinces = 1;
$("#Province").val(provinces);

我想使用省的名称，而不是省的ID，我该怎么做？

问候Siyabonga

Answer 1

你应该检查选项的内容，如下所示：

var provinces = "Eastern Cape";
$("#Province option:contains(" + provinces + ")").attr('selected', 'selected');

对于类似的选项，请使用以下命令：

$("#Province  option").each(function() {
  if($(this).text() == provinces ) {
    $(this).attr('selected', 'selected');            
  }                        
});

Answer 2

您可以获取包含所需文本的选项，并使用它的value来设置下拉列表，如下所示，它使用jquery

//use .filter() to get the option from the drop down with text = the required text
//then pass it's value to .val() of the dropdown
$('#Province').val($('#Province option').filter(function () { 
    return $(this).html() == "Eastern Cape"; }).val());

您可以将其转换为一个函数，以便更动态地使用：

function setDropdownByOptionText(dropdown, optionText){
     $(dropdown).val($(dropdown).find('option').filter(function () {
          return $(this).html() == optionText; }).val());
}

然后你可以这样叫它：

setDropdownByOptionText($('#Province'), "Eastern Cape");