Question

我正在尝试添加单击按钮的下拉菜单。

在第二个病房的下拉菜单中，有一个删除按钮，基本上可以删除下拉菜单。

问题是，当我单击“删除”链接时，整个div都会被删除，即使第一个下拉列表也是如此。

我只希望删除相应的下拉菜单。

<div class="row myccccccbackground" style="padding: 5px;margin: 265px 0 6px;"><span class="content_shorting">&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $this->translate('Call for action button 1');?><img class="Text_Action_bt1_tooltip" data-toggle="tooltip" data-placement="right" style="margin: 0px 0px -7px 3px;" src="<?=$this->basePath()?>/images/info_icon_grey.png"></span><br/><br/>
      <br> &nbsp;&nbsp;&nbsp;&nbsp;

     <button type='button' id = "btnAdd" style="position: relative;bottom: 24px;" >Add another...</button><br/><br/>
        <div class="fields_action"><br>
            <select id="action" class="increment" style="position: relative;bottom: 32px;">
                <option value="N">Select Action</option>
                <option value="Y">SMS</option>
                <option value="Y">Call</option>
                <option value="Y">Call Back</option>
                <option value="Y">Email</option>
                <option value="Y">Website </option>
             </select><br/>
        <span style="color:red;" class="key-error-class"  id="key_error_1" ></span>
        <span id="valueResponse_1" class="valueResponse-class"></span>
    </div>
</div>

JS：

$(document).ready(function() {
            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $(".fields_action"); //Fields wrapper
            var add_button      = $("#btnAdd"); //Add button ID

            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            var actionid = $('#action');
             //UPDATED
            if (actionid.val() === '' || actionid.val() === 'N') {
                alert("Please select an item from the list and then proceed!");
                $('#action').focus();

                return false;
            }
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div><select id="action" class="increment"><option value="N">Select Action</option><option value="Y">Call</option><option value="Y">Call Back</option><option value="Y">Email</option><option value="Y">Website </option></select> &nbsp;&nbsp; <input name="TextAdPriority" class="adtitle nospaceallow integeronly" value="" type="text"><a href="#" class="remove_field">Remove</a><br/></div>');
                }

            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });

更新：上述验证检查-即）如果选择了默认选项，则仅在第一个下拉菜单时抛出警报。

如何从第二个下拉菜单中检查默认值。

Answer 1

您错过了在<div>方法开始时添加append的情况。

这里是完整的代码。

$(wrapper).append('<div><select id="action" class="increment"><option value="N">Select Action</option><option value="Y">Call</option><option value="Y">Call Back</option><option value="Y">Email</option><option value="Y">Website </option></select> &nbsp;&nbsp; <input name="TextAdPriority" class="adtitle nospaceallow integeronly" value="" type="text"><a href="#" class="remove_field">Remove</a><br/></div>');

Answer 2

要验证多个下拉菜单，您可以按照以下方式修改代码。对我来说很好。

   $(add_button).click(function(e){ //on add input button click
       e.preventDefault();
       //UPDATED
       var dropdowns = $('.increment');
       var isValid = true
       dropdowns.map(function(idx, dropdown) {
         if (dropdown.value === '' || dropdown.value === 'N') {
           alert(`Please select an item on position ${idx+1} dropdown and then proceed!`);
           $(dropdown).focus();

           isValid = false;
         }
      })

     if(isValid && x < max_fields){ //max input box allowed
       x++; //text box increment
       $(wrapper).append('<div><select id="action" class="increment"><option value="N">Select Action</option><option value="Y">Call</option><option value="Y">Call Back</option><option value="Y">Email</option><option value="Y">Website </option></select> &nbsp;&nbsp; <input name="TextAdPriority" class="adtitle nospaceallow integeronly" value="" type="text"><a href="#" class="remove_field">Remove</a><br/></div>');
     }

 });

jQuery删除动态下拉列表删除整个父div

2 个答案: