Wählen Sie Optionen im Dropdown-Menü mit CSS und Javascript aus
P粉739706089
P粉739706089 2023-09-04 22:10:59
0
1
584
<p>Ich habe einen CSS-Selektorwert: </p> <pre class="brush:php;toolbar:false;">.ng-touched > div:nth-child(1) > ) > input:nth-child(1)</pre> <p>Ich versuche, document.querySelectorAll zu verwenden, um diesen CSS-Selektor mit einem Dropdown-Menü zu finden, <strong>und wähle die Option mit dem Text „APPLE“ aus</strong>. Dies ist die zweite Option im Dropdown-Menü. Dazu verwende ich den folgenden Code, aber nach der Ausführung des Codes ist die Option „APPLE“ nicht ausgewählt: </p> <pre class="brush:php;toolbar:false;">document.querySelectorAll(".ng-touched > div:nth-child(1) > div:nth-child(1) > div :nth-child(2) > input:nth-child(1)") .forEach(o => { o.value = "APPLE"; });</pre> <p>Bitte erklären Sie mir, was falsch läuft und welche notwendigen Änderungen am Code vorgenommen werden sollten. Vielen Dank im Voraus. </p>
P粉739706089
P粉739706089

Antworte allen(1)
P粉665427988

您的HTML结构对我来说似乎有问题。一个input元素不包含optionsselect元素才包含。我的代码片段向您展示了如何以编程方式将select下拉菜单的值分配给第二个选项,即APPLE。

它还使用了您现有的结构(根据您的查询派生),但是最后一个元素不再使用input,而是使用select,因为从语义上讲,inputoptions不符合逻辑。所以,如果我的解释有误,我的解决方案可能无法准确回答您的问题。但是我希望它仍然可以指导您朝正确的方向发展。

const select = document.querySelector(".ng-touched > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > select:nth-child(1)")


// setTimeout used to visualize how GOOGLE changes to APPLE.
setTimeout(() => {

  // You can access the options of the select with .options.
  // Then you can programatically set the selected value by index.
  select.options.selectedIndex = 1
}, 2000)
<div class="ng-touched">
  <div style="padding-left: 16px;">

    <div style="padding-left: 16px;">

      <div> </div>
      <div style="padding-left: 16px;">
        <select id="companies">
          <option value="google">GOOGLE</option>
          <option value="apple">APPLE</option>
          <option value="facebook">FACEBOOK</option>
          <option value="amazon">AMAZON</option>
        </select>
      </div>
    </div>
  </div>
</div>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage