Question

我试图在页面上多次使用javaScript克隆和删除函数，但我想用一个脚本来做。我有大约20个下拉列表，应该有作为设置页面的一部分克隆/删除的功能，这些下拉列表是从PHP和MySQL动态创建的

下拉列表和按钮似乎具有正确的名称，并且末尾的增加数字对齐。但是我不知道如何将这些名称传递给下面的javaScript文件。我很感激您的帮助，如果您还有其他需要，请告诉我。

指数：

$add_button        = '#btnAdd[]';
$delete_button     = '#btnDel[]';
$cloned_input      = '.clonedInput[]';

cloneMultiple.php

<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function() {

    var inputs = 1; 

    $('<?php echo $add_button; ?>').click(function() {
        $('<?php echo $delete_button; ?>:disabled').removeAttr('disabled');
        var c = $('<?php echo $cloned_input; ?>:first').clone(true);
        $('<?php echo $cloned_input; ?>:last').after(c);
    });

    $('<?php echo $delete_button; ?>').click(function() {
        if (confirm('continue delete?')) {
            --inputs;
            $(this).closest('<?php echo $cloned_input; ?>').remove();
            $('<?php echo $delete_button; ?>').attr('disabled',($('<?php echo $cloned_input; ?>').length  < 2));
        }
    });


});
//]]>  
</script>

以下是请求的HTML输出示例

<div style="float:left; width:33%;"><hr/>
    <input type="button" id="btnAdd2" class="add" style="width:180px;" value="Add Air Hammer" />
    <div class="clonedInput2" id="clonedInputed2">Air Hammer
        <label class="input input-right-small">
            <input type="button" class="btnDel delete" id="btnDel2" value="X" disabled="disabled" />
                <select id="AirHammer2" name="AirHammer2" style="width:160px;">
                    <option value="none" selected style="color:gray">None</option>
                </select>
        </label>
    </div>
</div>

<div style="float:left; width:33%;"><hr/>
    <input type="button" id="btnAdd3" class="add" style="width:180px;" value="Add Boiler" />
    <div class="clonedInput3" id="clonedInputed3">Boiler
        <label class="input input-right-small">
            <input type="button" class="btnDel delete" id="btnDel3" value="X" disabled="disabled"/>
                <select id="Boiler3" name="Boiler3" style="width:160px;">
                    <option value="none" selected style="color:gray">None</option>
                </select>
        </label>
    </div>
</div>

PHP

<?php
     $getEquipment = "SELECT * FROM rbs_equipment_type WHERE name != 'Truck'";
        $q_Equipment = $conn->prepare($getEquipment);
            $q_Equipment->execute();
                while($rowEquipment = $q_Equipment->fetch())
                    {
                    echo'
                    <div style="float:left; width:33%;"><hr/>
                        <input type="button" id="btnAdd'.$rowEquipment['id'].'" class="add" style="width:180px;" value="Add '.$rowEquipment['name'].'" />
                            <div class="clonedInput'.$rowEquipment['id'].'" id="clonedInputed'.$rowEquipment['id'].'">'.$rowEquipment['name'].'
                                <label class="input input-right-small">
                                    <input type="button" class="btnDel delete" id="btnDel'.$rowEquipment['id'].'" value="X" disabled="disabled" style="width:20px; margin:0px;padding-left:1px;padding-right:1px;padding-top:7px;padding-bottom:7px;"/>
                                        <select id="'.$rowEquipment['name'].''.$rowEquipment['id'].'" name="'.$rowEquipment['name'].''.$rowEquipment['id'].'" style="width:160px;">
                                        <option value="none" selected style="color:gray">None</option>';
                                        /*Find Children*/

    $getChildren = "SELECT * FROM rbs_equipment_model WHERE model_type_id = ".$rowEquipment['id'];
        $qChildren = $conn->prepare($getChildren);
            $qChildren -> execute();
                while($rowChildren = $qChildren -> fetch())
                    {
                        echo "<option value='".$rowChildren['model_id']."'>".$rowChildren['model_name']."</option>";
                    }
echo                    '</select>
                    </label>
                </div>
           </div>';
        }
?>

Answer 1

演示：http://jsfiddle.net/1ry9h1e3/1/

无需ID，您只需要在循环中的第一个div中添加.wrapper类

<div style="float:left; width:33%;" class="wrapper">

然后jQuery可以使用它来查找它需要找到的元素。

$(document).ready(function() {
    var inputs = 1; 

    $('.add').click(function() {
        var $wrapper = $(this).closest('.wrapper');
        $wrapper.find('.delete').removeAttr('disabled');
        $wrapper.find('.clonedInput:first')
            .clone(true)
                .appendTo($wrapper)
        ;
    });

    $('.delete').click(function() {
        if (confirm('continue delete?')) {
            --inputs;
            var $wrapper = $(this).closest('.wrapper');
            $wrapper.find('.delete:first').attr('disabled', $wrapper.find('.delete').length < 2);
            $(this).closest('.clonedInput').remove();
        }
    });
});

多个javascript下拉列表克隆

1 个答案: