Question

我在PHP代码中研究这个概念。同时选择下拉框。我附加了文本框。我想删除重复的值，反之亦然

$package=array("Sliver","Gold","Broze","Limited","Unlimited","Constants");

<select id="choose_package" >
<?php foreach ($package as $packagevalue) {?>
    <option value="<?php echo $packagevalue;?>"> <?php echo $packagevalue;?></option>
<?php } ?>
</select>
<div class="package_limit"></div>

$(function () {
    $("#choose_package").on("change", function () {
        var selectval=$("#choose_package").val();
        var div = $("<div />");
        div.html(GetDynamicTextBox(selectval));
        $(".package_limit").append(div);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});

function GetDynamicTextBox(value) {
    return '<input name = "package_name_'+ value +'" readonly type="text" value = "' + value + '" />&nbsp;' +
    '<input name = "package_price_'+ value +'" type="text" value = "" />&nbsp;'+
    '<input type="button" value="Remove" class="remove" />'
}

https://jsfiddle.net/JVRK/w7xfzdus/13/

Answer 1

试试这个：

https://jsfiddle.net/mvwns78h/

var arr = new Array(); 
$("#choose_package").on("change", function () {
    var selectval=$("#choose_package").val();
    if($.inArray(selectval, arr) == -1) { // check if selected value is not in array then only append
       var div = $("<div />");
       div.html(GetDynamicTextBox(selectval));
       $(".package_limit").append(div);
       arr.push(selectval); // push selected value in array
    }
});

Answer 2

在添加新div之前，请检查是否已创建新元素：

"hjklhjilhjkl"

我的片段：

＆＃13;

if ($('input[name="package_name_' + selectval + '"]').length == 0) {
  $(".package_limit").append(div);
}

＆＃13;

$(function () {
  $("#choose_package").on("change", function () {
    var selectval=$("#choose_package").val();
    var div = $("<div />");
    div.html(GetDynamicTextBox(selectval));
    if ($('input[name="package_name_' + selectval + '"]').length == 0) {
      $(".package_limit").append(div);
    }
  });
  $("body").on("click", ".remove", function () {
    $(this).closest("div").remove();
  });
});
function GetDynamicTextBox(value) {
  return '<input name = "package_name_'+ value +'" readonly type="text" value = "' + value + '" />&nbsp;' +
    '<input name = "package_price_'+ value +'" type="text" value = "" />&nbsp;'+
    '<input type="button" value="Remove" class="remove" />'
}

＆＃13;

Answer 3

如果我理解了这个查询，那么这就是你的解决方案 https://jsfiddle.net/abhiyx/w7xfzdus/16/

请找到我的代码

            <select id="choose_package" >
                    <option value="Sliver"> Sliver</option>
                    <option value="Gold"> Gold</option>
                    <option value="Broze"> Broze</option>
                    <option value="Limited"> Limited</option>
            </select>
            <div class="package_limit">
            </div>

和jquery part

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript">
            $(function () {
        $("#choose_package").on("change", function () {
            var selectval=$("#choose_package").val();
          var div = $("<div />");
                   div.html(GetDynamicTextBox(selectval));
           $("#choose_package option[value='"+selectval +"']").remove();
                    $(".package_limit").append(div);
                });
                $("body").on("click", ".remove", function () {
        $("#choose_package").append('<option value="'+ this.id+'">'+this.id+'</option>');
                    $(this).closest("div").remove();
                });
            });
        function GetDynamicTextBox(value) {
                return '<input name = "package_name_'+ value +'" readonly type="text" value = "' + value + '" />&nbsp;' +
                       '<input name = "package_price_'+ value +'" type="text" value = "" />&nbsp;'+
                         '<input type="button" id= "'+ value+'" value="Remove" class="remove" />'
            }
            </script>

Answer 4

试试这个

HTML部分

<select id="choose_package" >
   <option value="None">-- Select --</option>
   <option value="Sliver"> Sliver</option>
   <option value="Gold"> Gold</option>
   <option value="Broze"> Broze</option>
   <option value="Limited"> Limited</option>
</select>
<div class="package_limit"></div>

JQuery Part

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript">
            $(function () {
        $("#choose_package").on("change", function () {           
           var selectval=$(this).find('option:selected').val();
          var div = $("<div />");
                   div.html(GetDynamicTextBox(selectval));               
           $("#choose_package option[value='"+selectval +"']").attr("disabled", true);
                    $(".package_limit").append(div);
            $(this).val('None');
                });
                $("body").on("click", ".remove", function () {          
       $("#choose_package option[value='"+ this.id+"']").attr("disabled", false);
                    $(this).closest("div").remove();
                });
            });
        function GetDynamicTextBox(value) {
                return '<input name = "package_name_'+ value +'" readonly type="text" value = "' + value + '" />&nbsp;' +
                       '<input name = "package_price_'+ value +'" type="text" value = "" />&nbsp;'+
                         '<input type="button" id= "'+ value+'" value="Remove" class="remove" />'
            }
            </script>

我想删除重复添加

4 个答案: