从下拉列表中获取值并创建另一个下拉列表

Question

我创建了一个下拉列表，它看起来像这样

 <select id="mySelect">
       <option value="one">Do one</option>
       <option value="two">Do two</option>
      </select>

首先我不想有提交按钮。我正在搜索的第二件事是，当我 select 第一个选择出现另一个下拉列表时，当我选择第二个出现文本输入供用户输入内容时。谢谢你，对不起英语！

Answer 1

使用 jQuery 做一些简单的事情，例如：

$('#mySelect').on('change', function() {
  $('#input').html('<input name="myname" value="'+this.value +'">');
})

JSFiddle

Answer 2

如果您不想导入任何 jQuery，您仍然可以使用纯 JavaScript。

Here is a demo

只需在您的文件中包含以下脚本，

function myFun(){
    var val = document.getElementById("mySelect");
    var input = document.getElementById("myIn");
    var sel = document.getElementById("myOtherSelect");
    var sub = document.getElementById("mySubmit");
    if(val.value == "one"){
        sel.style.display = "block";
        input.style.display = "none";
        sub.style.display = "none";
    }else if(val.value == "two"){
        input.style.display = "block";
        sub.style.display = "block";
        sel.style.display = "none";
    }else{
        input.style.display = "none";
        sub.style.display = "block";
        sel.style.display = "none";
    }
}

现在在您的 select 上添加 onchange 事件，

    <select id="mySelect" onchange="myFun()">
       <option value="emp" selected>Choose something</option> 
       <option value="one">Do one</option>
       <option value="two">Do two</option>
    </select>
    <select id="myOtherSelect">
       <option value="three">Do three</option>
       <option value="four">Do four</option>
    </select>
    <input type="text" id="myIn">
    <input type="submit" id="mySubmit">

从下拉列表中获取值并创建另一个下拉列表

Get value from dropdownlist and create another dropdown list

html

list

button

drop-down-menu