Question

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

 <select id="mySelect">
       <option value="one">Do one</option>
       <option value="two">Do two</option>
      </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 as上添加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">

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

2 个答案: