0

我正在用 jQuery 制作一个动态的 html 表单。
它是一种用于测量每个房间的空气以进行通风的表格。

我需要两个输入：房间名称和风量值。
我的任务是用 Select 和 Input 以及 Remove 按钮动态添加一行。稍后它应该提交给 php 处理器。

我的计划是克隆 div 并且看起来它可以工作，但我遇到了 Select 输入字段的问题。
原始 Div 中的选择菜单有效，但 i clone div Select 值不会改变。我正在四处寻找解决方案，但我还没有找到答案。通过按删除按钮，我需要使用元素删除当前 DIV。这也不起作用:)

我不确定我是否以正确的方式实现这一切，因为我刚刚开始使用 jQuery。
谢谢你的帮助！

这是表单的代码：

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript"> 

function Addonemoretilluft() {
    $('#tilluft_line').clone().insertAfter("#tilluft_line"); 
}

function Removetilluft() {
    $('#page').remove("#tilluft_line"); 
}


$(document).ready(function() {     
    $("#add_tilluft").click(function(){
      Addonemoretilluft();
    });  

    $("#remove_tilluft").click(function(){
      Removetilluft();
    });    
});
</script>  
</head>
<body>
<div class="page" data-iscroll="" id="page">      
               <form action="handle.php" method="post" data-ajax="false" id="tilluft_form"> 

                  <div id="tilluft_line" class="ui-grid-b">
                        <div id="select_value" class="ui-block-a">
                         <select name="tilluft_name[]" id="tilluft_name[]" data-mini="true">
                            <option value="val1">Val 1</option>
                            <option value="val2">Val 2</option>
                            <option value="val3">Val 3</option>
                            <option value="val4">Val 4</option>    
                         </select>  
                        </div>
                        <div id="input_value" class="ui-block-b">
                            <input name="tilluft_value[]" id="tilluft_value[]" data-mini="true">
                        </div>
                        <div class="ui-block-c" style="width:35px;">
                            <a href="#" id="remove_tilluft" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a> 
                        </div>
                    </div>
                    <a id="add_tilluft"  href="#" data-role="button" data-icon="add" data-mini="true" data-inline="true">Add one more</a> 
               </form>  
               <input type="submit" form="tilluft_form" value="Submit Form" data-mini="true" data-inline="true"/>
          </div>​
</body>

测试版http://jsfiddle.net/D4MPu/

4

1 回答 1

0

您的主要问题是，当您克隆该行时，您正在复制一个 ID 值。根据HTML 规范：

可能导致脚本以难以调试的方式失败的错误 一些错误旨在帮助防止难以调试的脚本问题。

这就是为什么，例如，具有相同值的两个 id 属性是不合格的。重复的 ID 会导致选择错误的元素，有时会产生灾难性的后果，其原因难以确定

这是不允许的。ID 元素必须是唯一的。相反，使用类之类的东西（你可以有重复）来解决这个问题，或者更改 ID（尽管我建议使用类）。

于 2012-11-21T15:32:39.423 回答