Pilih pilihan dalam menu lungsur menggunakan CSS dan Javascript

Question

Saya mempunyai nilai pemilih CSS:

.ng-touched > div:nth-child(1) > )> input:nth-child(1)

Saya cuba menggunakan document.querySelectorAll untuk mencari pemilih CSS ini yang mempunyai menu lungsur turun, dan pilih pilihan dengan teks "APPLE". Ia adalah pilihan kedua dalam menu lungsur. Untuk melakukan ini saya menggunakan kod berikut tetapi selepas menjalankan kod pilihan "APPLE" tidak dipilih:

document.querySelectorAll(".ng-touched > div:nth-child(1) > div:nth-child(1) > div :nth-child(2) >
  .forEach(o => {
     o.value = "APPLE";
  });

Sila bimbing saya apa yang salah dan perubahan yang perlu dibuat pada kod. Terima kasih terlebih dahulu.

Answer 1

Nampaknya ada sesuatu yang tidak kena dengan struktur HTML anda kepada saya. Nilai menu lungsur turun input元素不包含options；select元素才包含。我的代码片段向您展示了如何以编程方式将select diberikan kepada pilihan kedua, iaitu APPLE.

Ia juga menggunakan struktur sedia ada anda (berasal daripada pertanyaan anda), tetapi elemen terakhir tidak lagi digunakan input，而是使用select，因为从语义上讲，input与options yang tidak logik. Jadi, jika penjelasan saya salah, penyelesaian saya mungkin tidak menjawab soalan anda dengan tepat. Tetapi saya harap ia masih membimbing anda ke arah yang betul.

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>