在另一个下拉列表中选择选项时显示下拉列表答案

【问题标题】：Show dropdown when option is selected in the another dropdown在另一个下拉列表中选择选项时显示下拉列表
【发布时间】：2020-07-25 15:57:15
【问题描述】：

我有一个主下拉菜单，当在下拉菜单中选择一个选项时，在下一个文本字段中，另一个下拉菜单必须带有不同的值，并且当在文本中的主下拉菜单中选择其他选项时，必须出现在同一文本字段中。所以基本上我的问题是，当在下拉列表中选择选项时，如何在同一个输入字段中添加文本和 dropdwon。

I have tried to do the one part of the problem i.e , 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>

【问题讨论】：

很抱歉我还不能测试它，因为我必须在 3 分钟内离开。但我认为您不会在 option 元素上获得点击事件。为什么不在选择上使用更改事件并在新选择更改为 3 值时添加它？
如果您的问题是基于从下拉列表中选择第三个选项来触发，那么您必须在下拉列表中调用.change() 并运行函数if ($(this).val() == 'option3')。如果您询问是否为文本和下拉菜单使用一个元素，请尝试<details>。检查此链接 (w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist)

标签： javascript html

【解决方案1】：

您没有按照应有的方式选择日期dropdown。没有value for days 选项（第三个选项）。

首先我们需要设置第三个选项的值
检查其是否选择了选择onchange函数

如果 selected option 的 value 是 no-of-days，我们可以检查 change，然后我们可以附加另一个 dropdown 或 else，我们将不显示任何内容。

在下面运行 sn-p 以查看它的工作情况。

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>

【讨论】：

@SushmaA 欢迎您。请您接受answer。标记为解决方案