根据用户

时间:2016-04-03 02:54:24

标签: javascript jquery html css drop-down-menu

我想要实现的是在下拉选择中添加与用户输入相关的输入字段。然后,下一个文本字段出现在选择中。我希望继续附加那些选择输入字段。

以下是我到目前为止所尝试的内容,

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>



<script>
$(document).ready(function(){
  
    $("#volvo").click(function(){
        $("option").append("<li>Volvo: <input type="text" name="volvotype" ></li>");
    });


  $("#saab").click(function(){
        $("option").append("<li>Saab Number: <input type="text" name="saabtype" value="Mickey"><br></li>");
    });

$("#opel").click(function(){
        $("option").append("<li>opel type: <input type="text" name="opeltype" value="Mickey"><br></li>");
    });

$("#audi").click(function(){
        $("option").append("<li>audi type: <input type="text" name="auditype" value="Mickey"><br></li>");
    });


});


</script>

</head>
<body>
<select>
  <option value="volvo" id="volvo">Volvo</option>
  <option value="saab" id="saab">Saab</option>
  <option value="opel" id="opel">Opel</option>
  <option value="audi" id="audi">Audi</option>
</select>
  
</body>
</html>

修改

正如@Braza建议的那样,我不想覆盖,我想逐个追加每个选中的(通过下拉菜单)输入字段。

1 个答案:

答案 0 :(得分:1)

我创建了这个小提琴来演示https://jsfiddle.net/jbzL55ca/3

$('select.theSelect').on('change', function (e) {}