Я хочу удалить повторное добавление

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, проверьте, новый элемент был уже создан:

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

Мой фрагмент:

$(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" />' 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<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>

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 часть

  <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 Часть

<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>