0

我试图制作一个简单的表单，它有一个带有克隆和删除按钮的选择菜单，一旦这些选择菜单中的任何一个发生更改，它就必须使用 .Ajax 调用发布表单。它的工作，但有一些问题 HTML

<form action="action.php" method="post" id="LangForm" >
<div id="fileds">
<select name="lang[]" id="lang" class="lang">
<option value="">Select</option>
<option value="arabic">Arabic</option>
<option value="english">english</option>
</select>
</div>
</form>
<button class="clone">Clone</button> 
<button class="remove">Remove</button>
<div id="content"></div>

JS

$(function(){
     var counter = 1;
    $(".clone").click(function(){
        $('#lang').clone().appendTo('#fileds');
        counter++ ;
    });
    $(".remove").click(function(){
        if (counter > 1) {
        $('#lang:last').remove();
        counter-- ;
        }       
    });
    $('.lang').change(function(){ 
    $.ajax({type:'POST', 
        url: 'action.php', 
        data:$('#LangForm').serialize(), 
        success: function(response) {
        $('#content').html(response);
    }
    });
    });
});

当我单击删除按钮时，它首先有 2 个问题，它首先删除原始选择菜单，然后删除克隆的菜单并保留最后一个克隆的菜单我需要先删除克隆的菜单并保留原始菜单

仅当原始菜单更改时才发布第二个提交表单我需要的是在任何菜单更改原始或克隆时提交表单。下面是来自操作 PHP 页面的 PHP 代码，它只是为了显示结果 PHP

<?php
print_r ($_POST['lang']);
?>

谢谢

4

1 回答 1

0

HTML：

<form action="action.php" method="post" id="LangForm" >
<div id="fileds">
    <select name="lang[]" class="lang">
        <option value="">Select</option>
        <option value="arabic">Arabic</option>
        <option value="english">english</option>
    </select>
</div>
</form>
<button class="clone">Clone</button> 
<button class="remove">Remove</button>
<div id="content"></div>​

注意：该字段的 ID 已被删除。

JS：

$(function(){

    $(".clone").click(function(){
        // clone(true) will clone the element with event handlers intact. 
        $('.lang').last().clone(true).appendTo('#fileds');
    });

    $(".remove").click(function(){
        var selects = $('.lang');
        if (selects.length > 1) {
            selects.last().remove()
        }
    });
    $('.lang').change(function(e){
        // console.log(e)
        $.ajax({type:'POST', 
                url: 'action.php', 
                data:$('#LangForm').serialize(), 
                success: function(response) {
                $('#content').html(response);
            }
        });
    });
});​

演示：

http://jsfiddle.net/kFB5j/1/

于 2012-07-08T06:33:12.520 回答