动态添加文本框不起作用

Question

动态添加文本框不起作用

6

这真是令人沮丧。我的代码上周还能正常运行。当用户更改下拉选择器的值[使用change()]时，我会向我的HTML页面添加多个文本框。

以下是HTML代码片段:

<div id="files" class="control-group">
    <label class="control-label">No. of files</label>
    <div class="controls" >
        <select id="files" name="files" class="span3">
            <option value="">--Select Option--</option>
            <?php for($i=1;$i<21;$i++){ ?>
                <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?>
        </select>
    </div>
</div>
<div class="control-group" id="titles">
    <label class="control-label">File Titles</label>
    <div class="controls" id="titleAdd"></div>
</div>

以下是我的Javascript / jQuery代码：

$(document).ready(function(){
        $("#titles").hide();
    });
    var container;
    // Add & Remove textboxes 
    $("#files").change(function(){

        //Remove all textboxes
        $("#titles").show();
        $(container).empty(); 
        $(container).remove();  
        //"DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
        container = $('<div>', {class: 'controls'});
        var option = $("#files").val();
        for(i=1;i<=option;i++)
        {
            // Add a TextBox
            $(container).append('<input style="display: block;" type=text name="Description[]" class="span3 input-left-top-margins" id="Description' + i +'"' + 'placeholder="File ' + i + ' Title" />');
        }
        $('#titleAdd').after(container);   // ADD THE DIV ELEMENT IN THE RIGHT PLACE.
    });

最令人烦恼的是，这段代码几天前还好好的运行着。

- Shreyas Tripathy

你遇到了什么错误？ - Deenadhayalan Manoharan

1

开始时container将未定义。此外，您的附加操作将会重复id="Description'。 - Shaunak D

@Deena - 没有错误。早些时候，当我改变了 #files 的值（比如 5），就会创建 5 个文本框。现在，这些文本框没有被创建。 - Shreyas Tripathy

4个回答

2

将你的'$("#files").change(function(){'代码放在'document.ready'中：

$(document).ready(function(){
        $("#titles").hide();

    var container;
    // Add & Remove textboxes 
    $("#files").change(function(){

        //Remove all textboxes
        $("#titles").show();
        $(container).empty(); 
        $(container).remove();  
        //"DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
        container = $('<div>', {class: 'controls'});
        var option = $("#files").val();
        for(i=1;i<=option;i++)
        {
            // Add a TextBox
            $(container).append('<input style="display: block;" type=text name="Description[]" class="span3 input-left-top-margins" id="Description' + i +'"' + 'placeholder="File ' + i + ' Title" />');
        }
        $('#titleAdd').after(container);   // ADD THE DIV ELEMENT IN THE RIGHT PLACE.
    });
 });

- Domain

1

将主 div 的 ID 从“files”更改为其他内容。 - Domain

2

试试这个...

将ID名称文件更改为filesdata，因为您已经在div中使用了ID“ files”

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="files" class="control-group">
    <label class="control-label">No. of files</label>
    <div class="controls" >
        <select id="filesdata" name="files" class="span3">
            <option value="">--Select Option--</option>            
                <option value="1">1</option> 
                 <option value="3">2</option> 
                  <option value="3">3</option> 
        </select>
    </div>
</div>
<div class="control-group" id="titles">
    <label class="control-label">File Titles</label>
    <div class="controls" id="titleAdd"></div>
</div>
<script>
$(document).ready(function(){
        $("#titles").hide();

    var container="";
    // Add & Remove textboxes 
    $("#filesdata").change(function(){

        //Remove all textboxes
        $("#titles").show();
        $(container).empty(); 
        $(container).remove();  
        //"DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
        container = $('<div>', {class: 'controls'});
        var option = $("#filesdata").val();

        for(i=1;i<=option;i++)
        {

            // Add a TextBox
            $(container).append('<input style="display: block;" type=text name="Description[]" class="span3 input-left-top-margins" id="Description' + i +'"' + 'placeholder="File ' + i + ' Title" />');
        }
        $('#titleAdd').after(container);   // ADD THE DIV ELEMENT IN THE RIGHT PLACE.
    });
       });
</script>

Demo:https://jsfiddle.net/jqksjzL1/

- Deenadhayalan Manoharan

是的，这是一个业余错误！非常感谢。 - Shreyas Tripathy

1

你给

和

- Ayyanar G

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dhh · Accepted Answer

这里有两个id为#files的元素。

可以在此处查看一个工作示例：https://jsfiddle.net/1c3b63f4/ - 在这个赋值中，jQuery总是返回一个空字符串：$("#files").val();。