如何使用 JavaScript 動態填入下拉清單內容？

透過Javascript 進行動態下拉清單填充

在您需要根據所做的選擇填充一個下拉清單(B) 的內容的場景中在另一個使用JavaScript 的下拉清單(A) 中，不需要複雜的AJAX 查詢。相反，您可以利用以下程式碼片段來完成此操作：

<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 <p>要使用此程式碼，請將其包含在JavaScript 檔案中並將configureDropDownLists 函數註冊為第一個下拉清單的onChange 事件處理程式(A) :</p>
<pre class="brush:php;toolbar:false"><code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value="" selected>Select</option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select></code>

此程式碼示範如何根據第一個下拉清單(ddl1) 中的選擇填入第二個下拉清單(ddl2)，利用switch-case 邏輯動態決定ddl2 的內容。

以上是如何使用 JavaScript 動態填入下拉清單內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！