Pilih pilihan dalam menu lungsur menggunakan CSS dan Javascript
P粉739706089
P粉739706089 2023-09-04 22:10:59
0
1
600
<p>Saya mempunyai nilai pemilih CSS: </p> <pre class="brush:php;toolbar:false;">.ng-touched > div:nth-child(1) > )> input:nth-child(1)</pre> <p>Saya cuba menggunakan document.querySelectorAll untuk mencari pemilih CSS ini yang mempunyai menu lungsur turun, <strong>dan pilih pilihan dengan teks "APPLE"</strong>. Ia adalah pilihan kedua dalam menu lungsur. Untuk melakukan ini saya menggunakan kod berikut tetapi selepas menjalankan kod pilihan "APPLE" tidak dipilih: </p> <pre class="brush:php;toolbar:false;">document.querySelectorAll(".ng-touched > div:nth-child(1) > div:nth-child(1) > div :nth-child(2) > .forEach(o => { o.value = "APPLE"; });</pre> <p>Sila bimbing saya apa yang salah dan perubahan yang perlu dibuat pada kod. Terima kasih terlebih dahulu. </p>
P粉739706089
P粉739706089

membalas semua(1)
P粉665427988

Nampaknya ada sesuatu yang tidak kena dengan struktur HTML anda kepada saya. Nilai menu lungsur turun input元素不包含optionsselect元素才包含。我的代码片段向您展示了如何以编程方式将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,因为从语义上讲,inputoptions 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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan