Question

我从clone form element with increment修改了Josiah的答案这对我来说效果很好但是现在我需要进一步扩展它以显示和隐藏克隆div内的其他字段

如果#delivery_mode选择值为1或2，我需要显示div.hidden并确保它适用于每个克隆的div。

的Javascript

$(document).ready(function(){
var template = $('#products .product:first').clone();
var productsCount = 1;
window.addProduct = function(){
    productsCount++;
    var product = template.clone().find(':input, div').each(function(){
        var newId = this.id.substring(0, this.id.length-1) + productsCount;

        $(this).next().attr('for', newId); // update label for
        this.id = newId; // update id and name (assume the same)
        }).end()
        .attr('id', 'product' + productsCount)
        .appendTo('#products');
        }
$('.add').click(addProduct);

$("a#rp").click(function () {
if ($(".product").length != 1) {
    $(".product:last").remove();
    }
        event.preventDefault();
    });
 });

数天的数组：

$days = array("0" => "Monday", "1" => "Tuesday", "2" => "Wednesday", 
 "3" => "Thursday", "4" => "Friday", "5" => "Saturday", "6" => "Sunday"); ?>

HTML

<div id="products">
        <div id="product1" class="product">

                    <div class="field" id="delivery_mode_1">
                        <label class="label has-text-white">Delivery Mode</label>
                            <div class="control">
                                <div class="select">


                                    <select name="delivery_mode[]" class="delivery_mode">
                                        <option value="0">Online</option>
                                        <option value="1">FT</option>
                                        <option value="2">PT</option>
                                    </select>

                                </div>
                            </div>
                    </div>

                    <div class="hidden">
                        @foreach($days as $day)
                            <input name="<?php echo $day; ?>[]" id="<?php echo $day; ?>_1" value="1" type="checkbox" class="is-checkradio is-white f_input" />
                            <label for="<?php echo $day; ?>_1"><?php echo $day; ?></label>
                        @endforeach
                    </div>


        </div>
</div>


<div class="field">
<div id="remove-product" class="control">
<a id="rp" class="button is-fullwidth is-link is-inverted is-outlined"><span 
class="icon is-small"><i class="fa fa-times"></i></span><span>Remove 
Product</span></a>
</div>
</div>

<div class="field">
<div id="add-product" class="control">
<a id="ap" class="add button is-fullwidth is-link is-inverted is-outlined" >
<span class="icon is-small"><i class="fa fa-plus"></i></span><span>Add 
Product</span></a>
</div>
</div>

通过下拉选择在Cloned div中显示/隐藏

0 个答案: