在追加之前检查select中的重复值

Question

我想在附加选项之前检查选择框的重复值，如果第一个选择框值全部准备好在追加列表中停止新的重复追加。

here is jsFiddle

＆＃13;

＆＃13;

$(function () {
    $("#addtoption").bind("click", function (){
          var div = $("<div />");
          div.html(GetTransferOpt(""));
          $(".trnlistopt").append(div);
    });
});

function GetTransferOpt(value) {
    var digit = $('#digit').val();
    var trtyp = $('#type').val();
    var trsdet = $('#number').val();
    return '<span class="dig">'+digit+'</span>&nbsp; &nbsp; &nbsp;<span class="trnsto">'+trtyp+'</span>&nbsp; &nbsp; &nbsp;<span class="trnsop">'+trsdet+'</span>';
}

＆＃13;

.trnlistopt { padding:20px 0 0}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If first select box value all ready append </p>

<select name="digit" id="digit">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
</select>

<select name="type" id="type">
		<option value="Option 1">Option 1</option>
		<option value="Option 2">Option 2</option>
		<option value="Option 3">Option 3</option>
		<option value="Option 4">Option 4</option>
</select>

<input type="text" name="number" id="number" value="">

<input type="button" id="addtoption" value="Add">

<div class="trnlistopt"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

保持阵列。点击推送选项到阵列。下次使用indexOf()检查该数组中是否存在该选项，如果不存在，请添加其他内容不要添加

＆＃13;

＆＃13;

$(function () {
    added_options = [];
    $("#addtoption").bind("click", function (){
          var div = $("<div />");
          console.log(added_options);
          if(added_options.indexOf($('#digit').val())>-1){
               alert("error");
               return false;
          } else {
             added_options.push($('#digit').val());
             div.html(GetTransferOpt(""));
             $(".trnlistopt").append(div);
          }
    });
    
    $("body").on("click", ".remove", function () {
								
                $(this).closest("div").remove();
                
                
                added_options.splice(added_options.indexOf(this.id),1);// step to remove from added options
                
    });
});

function GetTransferOpt(value) {
    var digit = $('#digit').val();
    var trtyp = $('#type').val();
    var trsdet = $('#number').val();
    return '<span class="dig">'+digit+'</span>&nbsp; &nbsp; &nbsp;<span class="trnsto">'+trtyp+'</span>&nbsp; &nbsp; &nbsp;<span class="trnsop">'+trsdet+'</span> &nbsp; <span class="remove" id="'+digit+'">remove</span>';
}

＆＃13;

.trnlistopt { padding:20px 0 0}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If first select box value all ready append </p>

<select name="digit" id="digit">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
</select>

<select name="type" id="type">
		<option value="Option 1">Option 1</option>
		<option value="Option 2">Option 2</option>
		<option value="Option 3">Option 3</option>
		<option value="Option 4">Option 4</option>
</select>

<input type="text" name="number" id="number" value="">

<input type="button" id="addtoption" value="Add">

<div class="trnlistopt"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

跟踪数组并检查所有属性是否相等，如果不相等则添加到html

＆＃13;

＆＃13;

var options=[];

$(function () {
    $("#addtoption").bind("click", function (){
          var div = $("<div />");
          var divHTML=GetTransferOpt("")
          if(divHTML!=1)
         			 div.html(divHTML);
          $(".trnlistopt").append(div);
    });
});

function GetTransferOpt(value) {
		 var digit = $('#digit').val();
    var trtyp = $('#type').val();
    var trsdet = $('#number').val();
    	var option={
      digit : $('#digit').val(),
      trtyp: $('#type').val(),
      trsdet : $('#number').val()      
      }
      for(i=0;i<options.length;i++){
        if(option.digit==options[i].digit)
         if(option.trtyp==options[i].trtyp)
         if(option.trsdet==options[i].trsdet)
         return 1
      
      }
      options.push(option)
    return '<span class="dig">'+digit+'</span>&nbsp; &nbsp; &nbsp;<span class="trnsto">'+trtyp+'</span>&nbsp; &nbsp; &nbsp;<span class="trnsop">'+trsdet+'</span>';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If first select box value all ready append </p>

<select name="digit" id="digit">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
</select>

<select name="type" id="type">
		<option value="Option 1">Option 1</option>
		<option value="Option 2">Option 2</option>
		<option value="Option 3">Option 3</option>
		<option value="Option 4">Option 4</option>
</select>

<input type="text" name="number" id="number" value="">

<input type="button" id="addtoption" value="Add">

<div class="trnlistopt"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

$(function () {
    $("#addtoption").bind("click", function (){
          var div = $("<div />");
          div.html(GetTransferOpt(""));
          $(".trnlistopt").append(div);
    });
});

function GetTransferOpt(value) {
    var digit = $('#digit').val();
    var stop = false;
    
    // loop trough all results and check if already exists
    $('.trnlistopt .dig').each(function(index, element){
      if(parseInt($(element).text(), 10) === parseInt(digit, 10)) {
          return stop = true;  // stop foreach loop and set stop to true
      }
    });
    
    if(stop) {
        return; // do nothing if digit is found
    }

    var trtyp = $('#type').val();
    var trsdet = $('#number').val();
    return '<span class="dig">'+digit+'</span>&nbsp; &nbsp; &nbsp;<span class="trnsto">'+trtyp+'</span>&nbsp; &nbsp; &nbsp;<span class="trnsop">'+trsdet+'</span>';
}

.trnlistopt { padding:20px 0 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If first select box value all ready append </p>

<select name="digit" id="digit">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
</select>

<select name="type" id="type">
		<option value="Option 1">Option 1</option>
		<option value="Option 2">Option 2</option>
		<option value="Option 3">Option 3</option>
		<option value="Option 4">Option 4</option>
</select>

<input type="text" name="number" id="number" value="">

<input type="button" id="addtoption" value="Add">

<div class="trnlistopt"></div>