首頁 web前端 js教程 如何根據使用者選擇填滿下拉式選單?

如何根據使用者選擇填滿下拉式選單?

Oct 18, 2024 pm 01:12 PM

How to Populately Dropdowns Based on User Selection?

Populating Dropdowns Based on Selection

When developing forms with multiple dropdowns, it can be beneficial to populate the options in one dropdown based on the selection made in another. This allows for a more user-friendly experience by narrowing down the choices and making data input more efficient.

One approach to achieving this functionality involves using JavaScript to dynamically update the content of the dependent dropdown. Here's an example that demonstrates how to populate one dropdown (B) based on the selection in another (A):

<code class="javascript">function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i &lt; colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i &lt; shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i &lt; names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}
登入後複製

This JavaScript function takes two parameters, ddl1 and ddl2, which represent the two dropdowns. It first initializes arrays with the options that will be displayed in each dropdown.

Next, a switch statement is used to handle the selection made in ddl1. Depending on the value of ddl1, it clears the options in ddl2 and populates it with the appropriate options. The createOption function is used to create and add each option to ddl2.

In the HTML, two dropdowns should be defined:

<code class="html">&lt;select id=&quot;ddl&quot; onchange=&quot;configureDropDownLists(this,document.getElementById('ddl2'))&quot;&gt;
  &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
  &lt;option value=&quot;Colours&quot;&gt;Colours&lt;/option&gt;
  &lt;option value=&quot;Shapes&quot;&gt;Shapes&lt;/option&gt;
  &lt;option value=&quot;Names&quot;&gt;Names&lt;/option&gt;
&lt;/select&gt;

&lt;select id=&quot;ddl2&quot;&gt;
&lt;/select&gt;</code>
登入後複製

When the user selects an option in ddl1, the onchange event triggers the configureDropDownLists function, which updates the options in ddl2 accordingly. This approach provides a convenient way to populate one dropdown based on the selection in another, enhancing the usability of forms.

以上是如何根據使用者選擇填滿下拉式選單?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

See all articles