尝试从下拉列表中选择一个值答案

【问题标题】：Trying to select a value from a drop-down尝试从下拉列表中选择一个值
【发布时间】：2019-10-01 19:37:12
【问题描述】：

我正在访问的页面上的一个表单。此表单有一个包含 3 个选项的下拉列表。我需要选择第三个选项。使用 cefsharp 库（嵌入式 Web 浏览器）从 C# 程序访问网页。

我可以使用

更改显示的文本

document.forms[0].getElementsByClassName('css-0 Select__single-value')[0].innerText="Keep in-play";

但这还没有注册。还尝试触发输入和更改事件，但它仍然无法识别我的选择。有什么建议吗？

这是表单的原始 DOM：

<div class="bet-widget-optional-params">
  <div class="bet-params">
    <div class="param-wrapper"><span class="param-label"><a class="link" href="https://help.smarkets.com/hc/en-gb/articles/115003946591" target="_blank">Time In Force</a></span>
      <div class="param-select">
        <div class="css-0 Select custom-select-box Select menu-on-click">
          <div class="css-0 Select__control">
            <div class="css-0 Select__value-container Select__value-container--has-value">
              <div class="css-0 Select__single-value">Default</div><input id="react-select-bet-param-selector-input" readonly="" tabindex="0" class="css-14uuagi" value=""></div>
            <div class="css-0 Select__indicators"><span class="css-0 Select__indicator-separator"></span><span aria-hidden="true" class="Select__arrow-zone"><span class="Select__arrow"></span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

嗨，Ian，您能否提供有关您的 DOM 结构的更多信息，因为我建议的代码应该可以正常工作。
斯蒂芬 - 感谢您的关注。作为一个新用户，我看不到任何将屏幕截图复制到回复中的方法——或者我错过了什么。我在 Firefox 中使用 Inspect Element，它似乎不允许我突出显示相关的 DOM 行并复制它们。
是的，它不会让新用户发布图像，DOM的源代码副本会更好。您可以从视图源复制它 CTRL+U
斯蒂芬 - 这就是我缺乏知识的地方。仅当我单击初始显示的页面时才会显示该表单。如果我执行 CTRL-U，则无法找到所显示表单的来源（至少我找不到）。也许您可以直接查看该页面。转到smarkets.com/event/18340174/sport/horse-racing/wolverhampton/…。您将看到马名列表和每个右侧的 4 个框。单击任何蓝色框 - 它们将有一个十进制数字或在里面询问。下拉菜单在显示的表单标题 Time In Force 中
我认为这里发生的是 Javascript 正在添加新的 HTML。当然，当您选择下拉列表右侧的箭头时，DOM 中会出现一个新类 - 不幸的是，我无法展开该类以查看其中包含哪些元素。

标签： javascript c# dom cefsharp

【解决方案1】：

在 JavaScript 中，您可以设置 selectedIndex 属性。

elem.selectedIndex = 2;

设置-1 将删除任何选择，任何正整数都会选择列表中的那个项目（0 索引）...所以如果你想要第三个项目，只需将其设置为2。

HTMLSelectElement.selectedIndex docs

该属性也可以用作 getter，因此如果您想知道选择了哪个元素，可以这样请求：

var currentSelectedIndex = elem.selectedIndex;

下面的完整交互示例：

var selectElem = document.getElementById('select');
var pElem = document.getElementById('p');
var buttonElem = document.getElementById('button');

selectElem.addEventListener('change', function() {
  var index = selectElem.selectedIndex;
  pElem.innerHTML = 'selectedIndex: ' + index;
});

buttonElem.addEventListener('click', function(){
  selectElem.selectedIndex = 2;
});

<p id="p">selectedIndex: 0</p>

<select id="select">
  <option selected>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>
<input type="button" id="button" value="Set it to C (2)"/>

【讨论】：