Javascript从下拉列表中自动选择答案

【问题标题】：Javascript auto select from dropdownJavascript从下拉列表中自动选择
【发布时间】：2020-05-15 19:19:49
【问题描述】：

我正在搜索和搜索，但找不到任何我需要的东西。

所以我需要 javascript，它将从下拉列表中选择选项，但不是按选项值编号，而是按名称。

我有：

<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>

所以我需要按名称而不是 id 选择 • Jawor - 这是最重要的。如何让它发挥作用？

【问题讨论】：

stackoverflow.com/questions/3989324/…

标签： javascript

【解决方案1】：

对你来说是这样的；

var options = document.getElementsByClassName("aa")[0].options,
	name ="Jawor";

for(i = 0; i < options.length; i++){
   if(options[i].text.indexOf(name) > -1){
    	options[i].selected = true;
        break;
    }
}

<select class="aa" id="local" name="local">
    <option value="0">Cała Polska</option>
    <option value="1">Dolnośląskie</option>
    <option value="100">• Bolesławiec</option>
    <option value="101">• Dzierżoniów</option>
    <option value="102">• Głogów</option>
    <option value="103">• Góra</option>
    <option value="104">• Jawor</option>
    <option value="105">• Jelenia Góra</option>
</select>

【讨论】：

break 一旦找到匹配项就退出循环，没有理由继续寻找。

【解决方案2】：

你需要使用 onChange 事件处理程序...例如

<select onchange="showSelected()">

然后编写你的脚本...

<script>

function showSelected(){
    var s=document.getElementById('local');          //refers to that select with all options    
    var selectText=s.options[s.selectedIndex].text   // takes the one which the user will select
    alert(selectText)                                //Showing the text selected ...
}
</script>

你的其他代码没问题！

<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

【讨论】：

你倒退了。他不想显示所选选项的文本，他想根据文本更改选择哪个选项。
@Barmar 他想通过选项中的文本而不是值来更改选定的选项。我使用 alert() 来显示，否则任何人都可以删除它并做他/她想做的事情。

【解决方案3】：

在这里使用jquery。您可以使用以下功能：

function selectFromDropdown(selector, text) {
  $(selector).find('option').each(function() {
    if ($(this).text() == text) {
      $(selector).val($(this).val());
    }
  })
}

演示：

function selectFromDropdown(selector, text) {
  $(selector).find('option').each(function() {
    if ($(this).text() == text) {
      $(selector).val($(this).val());
      return false;
    }
  })
}

//use the function

setTimeout(function() {
  selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
  selectFromDropdown('#local', '• Jawor')
}, 4000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
  <option value="">Select</option>
  <option value="0">Cała Polska</option>
  <option value="1">Dolnośląskie</option>
  <option value="100">• Bolesławiec</option>
  <option value="101">• Dzierżoniów</option>
  <option value="102">• Głogów</option>
  <option value="103">• Góra</option>
  <option value="104">• Jawor</option>
  <option value="105">• Jelenia Góra</option>
</select>

【讨论】：

在这里，它工作得很好，但它需要在 chrome 控制台中工作.. 这不是
可能是控制台没有正确处理文本中的特殊字符。能不能先用普通字符试试看能不能用？
当你找到匹配的元素时，你应该跳出.each循环，没有必要继续搜索。通过返回 false 来做到这一点。
@Roy 效果很好，但有一个问题。我们有两个选择。州和地方。当我手动设置状态时 - 通过鼠标单击，然后在第二次选择中加载本地（城市）。当我使用您的脚本时，当然选择了州，但城市没有任何反应。我们还能做些什么吗？模拟鼠标点击可能吗？
之后。城市选项创建者使用州选择器的值来了解要列出哪些城市。

【解决方案4】：

chrome 控制台使用这个

document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';

【讨论】：