在另一個下拉列表中選擇選項時顯示下拉列表

Question

我有一個主下拉列表，當在下拉列表中選擇一個選項時，在下一個文本字段中，另一個下拉列表必須帶有不同的值，並且當在文本中的主下拉列表中選擇其他選項時，必須出現在相同文本域。 所以基本上我的問題是，當在下拉列表中選擇選項時，如何在同一個輸入字段中添加文本和 dropdwon。

I have tried to do the one part of the problem ie, when first two option is selected the value is appearing in input field, but I'm not able to make the dropdown appear in the input field when third option is selected.

誰能幫我解決這個問題！

 <html> <body> <label> Assets:</label> <select id="name" onchange="func()"> <option value=""></option> <option value="year">Calendar</option> <option value="the current month">Month</option> <option id="no-of-days">Days</option> </select><br><br> <label>Days:</label> <input type="text" id="days"> <script> function func() { var dropdown = document.getElementById("name"); var selection = dropdown.value; console.log(selection); var TextBox = document.getElementById("days"); TextBox.value = selection; document.getElementById('no-of-days').onclick = function() { var values = ["1", "2", "3", "4"]; var select = document.createElement("select"); select.name = "date"; select.id = "date" for (const val of values) { var option = document.createElement("option"); option.value = val; option.text = val.charAt(0).toUpperCase() + val.slice(1); select.appendChild(option); } var label = document.createElement("label"); label.innerHTML = "Choose your date: " label.htmlFor = "date"; document.getElementById("container").appendChild(label).appendChild(select); } } </script> </body> </html>

Answer 1

您沒有按照應有的方式選擇天數dropdown 。 天數選項（第三個選項）沒有value 。

首先我們需要設置第三個選項的值
檢查其選擇的 select onchange function

如果所選option的value no-of-days ，我們可以檢查change ，然后我們可以 append 另一個dropdown else我們將不顯示任何內容。

運行下面的代碼片段以查看它的工作原理。

 function func() { var dropdown = document.getElementById("name"); var selection = dropdown.value; var TextBox = document.getElementById("days"); var appendNewSelect = document.getElementById("container") TextBox.value = selection; //If days (option) is selected if (selection == 'no-of-days') { var values = ["1", "2", "3", "4"]; //Create Select var select = document.createElement("select"); select.name = "date"; select.id = "date" //Select option for (const val of values) { var option = document.createElement("option"); option.value = val; option.text = val.charAt(0).toUpperCase() + val.slice(1); select.appendChild(option); } //Label var label = document.createElement("label"); label.innerHTML = "Choose your date: " label.htmlFor = "date"; appendNewSelect.appendChild(label).appendChild(select); } else { appendNewSelect.innerHTML = '' } }

 <html> <body> <label> Assets:</label> <select id="name" onchange="func()"> <option value=""></option> <option value="year">Calendar</option> <option value="the current month">Month</option> <option value="no-of-days">Days</option> </select><br><br> <label>Days:</label> <input type="text" id="days"> <br> <br> <div id="container"> </div> </body> </html>

在另一個下拉列表中選擇選項時顯示下拉列表

問題描述

1 個解決方案

解決方案1
0 已采納 2020-07-25 16:15:28

在另一個下拉列表中選擇選項時顯示下拉列表

問題描述

1 個解決方案

解決方案1 0 已采納 2020-07-25 16:15:28

解決方案1
0 已采納 2020-07-25 16:15:28