Sélectionnez les options dans le menu déroulant en utilisant CSS et Javascript

Question

J'ai une valeur de sélecteur CSS :

.ng-touched > div:nth-child(1) > )> entrée :nt-enfant(1)

J'essaie d'utiliser document.querySelectorAll pour trouver ce sélecteur CSS qui a un menu déroulant, et sélectionnez l'option avec le texte "APPLE". C'est la deuxième option du menu déroulant. Pour ce faire, j'utilise le code suivant mais après avoir exécuté le code, l'option "APPLE" n'est pas sélectionnée :

document.querySelectorAll(".ng-touched > div:nth-child(1) > div:nth-child(1) > div :ntième-enfant(2) > entrée:ntième-enfant(1)")
  .forEach(o => {
     o.value = "POMME" ;
  });
Veuillez me guider sur ce qui ne va pas et sur les modifications nécessaires à apporter au code. Merci d'avance. 
            

Answer 1

Il me semble qu'il y a quelque chose qui ne va pas avec votre structure HTML. Une valeur de menu déroulant input元素不包含options；select元素才包含。我的代码片段向您展示了如何以编程方式将select est attribuée à la deuxième option, qui est APPLE.

Il utilise également votre structure existante (dérivée de votre requête), mais le dernier élément n'est plus utilisé input，而是使用select，因为从语义上讲，input与options ce qui n'est pas logique. Donc, si mon explication est fausse, ma solution risque de ne pas répondre avec précision à votre question. Mais j’espère que cela vous guide toujours dans la bonne direction.

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>