使用 JS 在已填充的选择标签中选择一个选项答案

【问题标题】：select an option in already populated select tag using JS使用 JS 在已填充的选择标签中选择一个选项
【发布时间】：2018-08-12 11:26:55
【问题描述】：

假设我有一个select 标签如下：

<select name='selectBox' id='selectBox'>
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>
    <option value='5'>five</option>
</select>

我在一个变量中有一个值，例如：selectVal = 'three'，我想选择基于text 而不是value 的选项。

我看过

$('#selectBox').prop('selectedIndex', 3);
$('#selectBox').selectmenu('refresh');

但我想选择text 的选项。我是这方面的初学者，任何帮助将不胜感激！

谢谢。

【问题讨论】：

How to select an option by its text?的可能重复
How to populate the options of a select element in javascript的可能重复

标签： javascript

【解决方案1】：

试试这个：-

var text = "five"
$(document).ready(function() {
  $('#selectBox option').each(function(index){
    if($(this).text() === text){
        $('#selectBox').prop('selectedIndex', index);
    }
  })
});

【讨论】：

【解决方案2】：

你必须得到选项索引：

 var options = $("#selectBox > option");
 $('#selectBox').prop('selectedIndex', options.index(":contains(three)"));

【讨论】：

【解决方案3】：

您可以使用each()尝试以下方式：

let selectVal = 'three';
$('#selectBox option').each(function(){ 
  if($(this).text() == selectVal)
    $('#selectBox').prop('selectedIndex', 2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='selectBox' id='selectBox'>
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>
    <option value='5'>five</option>
</select>

【讨论】：

【解决方案4】：

这是纯香草js

var element = document.getElementById(id);
element.value = valueToSelect;

【讨论】：