CSS と Javascript を使用してドロップダウン メニューのオプションを選択します

Question

CSS セレクター値があります:

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

document.querySelectorAll を使用して、ドロップダウン メニューがあるこの CSS セレクターを検索し、テキスト「APPLE」を含むオプションを選択しようとしています。これはドロップダウン メニューの 2 番目のオプションです。 これを行うために次のコードを使用していますが、コードを実行した後、オプション「APPLE」が選択されていません:

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

何が問題なのか、コードにどのような変更を加える必要があるのか​​を教えてください。よろしくお願いします。

Answer 1

HTML 構造に何か問題があるようです。 input 要素には options が含まれませんが、select 要素には含まれます。私のコード スニペットは、select ドロップダウン メニューの値を 2 番目のオプション (APPLE) にプログラムで割り当てる方法を示しています。

これは既存の構造 (クエリから派生した) も使用しますが、最後の要素は input ではなく select を使用します。 # と options は論理的ではありません。したがって、私の説明が間違っている場合、私の解決策はあなたの質問に正確に答えられない可能性があります。しかし、それでもあなたを正しい方向に導いてくれることを願っています。

リーリー リーリー