0

请参见下图，我想通过单击“添加更多产品”添加许多我想要的产品，然后将出现 2 个新元素（类别和项目下拉菜单）。这将通过 jQuery 完成，以复制上一个<li>并插入一个新的。

创建元素时，动态字段的名称应该是什么？数据将被添加到 $_POST 中，我可以插入到数据库中。

在此处输入图像描述

下面的 HTML，请参见动态字段名称（例如：name="items_2"、、name="items_2"）：我还添加了current_added_products字段的隐藏输入。这告诉我当前添加了多少产品。不确定我是否需要这个？

<ul>
    <li>
        <label>Category</label>
        <select name="category_1"> 
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items_1"> 
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
    <li>
        <label>Category</label>
        <select name="category_2"> 
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items_2"> 
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
    <li>
        <label></label>
        <input type="hidden" name="current_added_products" value="2" />
        <input type="button" class="add_more_product" value ="Add More Product" />
    </li>
</ul>

另外，在创建元素之前如何获取要添加的下一个数字？

4

5 回答 5

2

试试这个：

$('.add_more_product').click(function() {
    var $ul = $('ul:last');
    $ul.clone().find('select').attr('name', function(i, cur) {
        return cur.match(/\D+/g).join('') + (Number(cur.match(/\d+/g).join('')) + 1)
    }).end().insertAfter($ul)
})​

http://jsfiddle.net/L7zwn/

$('.add_more_product').click(function(e) {
    e.preventDefault();
    var $ul = $('ul:last');
    $ul.clone().insertAfter($ul)
})

http://jsfiddle.net/U7Zeb/

于 2012-10-03T10:09:37.230 回答
1

你可以给它们一个nameand category[]，items[]然后当它们被发布时，你最终会得到一个数字索引的数组，这样你就不必担心在每个新创建的元素上附加一个数字。例如，选择CPUwithItem 1和HDDwithItem 2将导致以下内容一旦发布：-

array
  'category' => 
    array
      0 => string 'CPU' (length=3)
      1 => string 'HDD' (length=3)
  'items' => 
    array
      0 => string 'Item 1' (length=6)
      1 => string 'Item 2' (length=6)

这将使添加新的表单元素变得更加容易：-

html

<ul>
    <li>
        <label>Category</label>
        <select name="category[]">
            <option>CPU</option>
            <option>HDD</option>
        </select>
        <select name="items[]">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </li>
</ul>

<input type="button" class="add_more_product" value ="Add More Product" />

jQuery

$(document).ready(function() {
    $('.add_more_product').on('click', function() {
        $('li:last').clone().appendTo('ul');
    });
});

这是一个小提琴

于 2012-10-03T10:12:12.983 回答
0

您可以使用name="item[1]", name="item[2]"。这将在您的$_POST['item'].

于 2012-10-03T09:57:11.113 回答
0

您可以使用以下代码替换从副本中获得的 html

htmlCopy.replace(/category_[0-9]+/, function(a){
       return "category_"+ (current_added_products+1);
});
htmlCopy.replace(/items_[0-9]+/, function(a){
       return "items_"+ (current_added_products+1);
});
于 2012-10-03T10:17:30.770 回答
-1

使用name上述答案中描述的 aray 。在数据库中添加更多使用代码，例如，

if (!$con){
   die('Could not connect: ' . mysql_error());
}

mysql_select_db($database, $con);

$authors = $_POST['Author'];
foreach($authors as $author) :
$sql="INSERT INTO savetest (type, number) VALUES ('{$_POST['type']}','{$author}')";

if (!mysql_query($sql,$con)){
   die('Error: ' . mysql_error());
}
endforeach;

更多这篇文章可以帮助你..

于 2012-10-03T10:18:27.793 回答