javascript - 下拉框的动态文本字段

Question

我们被困在一个可以选择外壳的模块中。外壳是一个下拉框，如果没有。选择 1 个，必须生成 1 个文本字段，如果选择 2 个外壳，则必须动态生成 2 个文本字段，最大要求为 4。请帮助我们！

Answer 1

HTML

<select name="enclosure" id="enclosure" >
    <option value="">Enclosure</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div id="textBox-container"></div>

脚本

<script>
    $(document).on('change','#enclosure',function(){
        var no=$(this).val();
        if(no)
        {
            $('#textBox-container').html('');
            for(i=0;i<no;i++)
            {
                $('#textBox-container').append('<input type="text" id="txtBox_'+(i+1)+'" value="'+(i+1)+'"/>');
            }
        }
    });
</script>

Answer 2

您可以通过创建最多四个文本框并根据下拉列表中的选定选项为用户使用显示/隐藏来做到这一点。例如：

    if(val == 1){
        $("input[id$='textbox2']").hide();
        $("input[id$='textbox3']").hide();
        $("input[id$='textbox4']").hide();
    } else if(val == 2){
        $("input[id$='textbox3']").hide();
        $("input[id$='textbox4']").hide();
    } else if(val == 3){
        $("input[id$='textbox4']").hide();
    }

希望这可以帮助你。