JavaScriptで選択タグをデフォルトで展開させる方法-フロントエンドQ&A-php.cn

JavaScriptで選択タグをデフォルトで展開させる方法

PHPz

リリース： 2023-04-25 19:00:27

オリジナル

2869 人が閲覧しました

HTML では、要素を展開する方法を紹介します。

実装方法:

1. HTML5のautofocus属性を利用する

最も簡単な方法は、HTML5のautofocus属性を利用することです。この属性は、ページが読み込まれた後に、指定された入力ボックス、ボタン、ドロップダウンリスト、およびその他の要素にフォーカスを自動的に設定できます。要素を展開する必要がある場合、autofocus 属性は目的の機能を達成できない場合があります。ニーズ。現時点では、JavaScript コードを使用してこれを実現できます。コードは次のとおりです。

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<script>
  document.getElementById('mySelect').size = document.getElementById('mySelect').length; 
</script>

ログイン後にコピー

上記のコードは、ドロップダウンリストのサイズ (size) をオプションの数 (長さ) に設定することで、ドロップダウンリストを自動的に拡張します。もちろん、オプション属性の設定や CSS スタイルの使用など、他の方法を使用して同じ効果を実現することもできます。

3. 特定の条件下でを展開する必要がある場合があります。満たされています。現時点では、JavaScript コードを使用して操作する必要があります。コードは次のとおりです:

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<script>
  document.getElementById('mySelect').addEventListener('click', function() {
    this.size = this.length;
  });
</script>

ログイン後にコピー

上記のコードは、addEventListener() メソッドを通じて要素の展開を簡単に実現できますが、いくつかの詳細に注意する必要があります: