防止がオプションjqueryの

Question

ない、これがリストに追加重複を防止する上で最善のアプローチであれば、以下のように、しかし、私が撮りたいルートがあることを確認してください非表示にすることで、追加リストに提出を複製：選択したオプションを提出した後

をリストに追加されたドロップダウンリストから、そのオプションを再度選択する機会を避けるために、ドロップダウンリストでそのオプションを非表示にしたいと思います。

$(document).ready(function() { 

    var counter = 1; 
    var maxAppend = 0; 

    $("#addItem").click(function() { 
     if (maxAppend >= 10) return; 
      var task = $('#searchresults').val(); 
      var src = $('#searchresults').find(":selected").attr('data-src'); 

      var $newLi = $("<li><div1><img src='" + src + "'/></div1><div2><input type='text' id='college' name='college' value='" + task + "'/></div2><button class='up'>&#x2191</button><button class='down'>&#x2193</button></li>") 
       $newLi.attr("id", "newLi" + counter++); 
     maxAppend++; 
       $("#tasks").append($newLi); 
      }); 

ドロップダウンリストのHTML：：ここで

は、現在のjQueryのは、添付のリストを作成されている

<select id="searchresults"> 
    <option value="">Select...</option> 
    <option value="1" data-src="blank1.png">Option 1</option> 
    <option value="2" data-src="blank2.png">Option 2</option> 
    <option data-src="blank3.png">Option 3</option> 
    <option data-src="blank4.png">Option 4</option> 
</select> 

<input type="button" id="addItem" value="Add" /> 

アペンドリストのためのHTML：

<div class="items"> 
    <ul id="tasks"> 
    </ul> 
</div> 

ドロップダウンリストから選択時にdivを隠すことについてたくさんのコードを見つけましたが、ドロップダウンリストオプションbasを隠すことはありませんサブミットされた追加リスト項目に追加されます。

明確化が必要な場合は教えてください。ご協力いただきありがとうございます。

Answer 1

（（見つける$（ '＃1にsearchResults'）を追加 "：選択"）を削除（）;あなたが追加した後。。）：この方法を試してみてください

$(document).ready(function() { 

var counter = 1; 
var maxAppend = 0; 

$("#addItem").click(function() { 
    if (maxAppend >= 10) return; 
     var task = $('#searchresults').val(); 
     var src = $('#searchresults').find(":selected").attr('data-src'); 

     var $newLi = $("<li><div1><img src='" + src + "'/></div1><div2><input type='text' id='college' name='college' value='" + task + "'/></div2><button class='up'>&#x2191</button><button class='down'>&#x2193</button></li>") 
      $newLi.attr("id", "newLi" + counter++); 
      maxAppend++; 
      $("#tasks").append($newLi); 
      // you also can try .hide() instead remove() 
      $('#searchresults').find(":selected").remove(); 
     }); 

Answer 2

$(document).ready(function() { 
 

 
    var counter = 1; 
 
    var maxAppend = 0; 
 

 
    $("#addItem").click(function() { 
 
    if (maxAppend >= 10) return; 
 
    var task = $('#searchresults').val(); 
 
    $("#searchresults option:selected").prop('disabled',true); 
 
    
 
    var src = $('#searchresults').find(":selected").attr('data-src'); 
 

 
    var $newLi = $("<li><div1><img src='" + src + "'/></div1><div2><input type='text' id='college' name='college' value='" + task + "'/></div2><button class='up'>&#x2191</button><button class='down'>&#x2193</button></li>") 
 
    $newLi.attr("id", "newLi" + counter++); 
 
    maxAppend++; 
 
    $("#tasks").append($newLi); 
 
    //reset dropdown 
 
    $('#searchresults').val(''); 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="searchresults"> 
 
    <option value="">Select...</option> 
 
    <option value="1" data-src="blank1.png">Option 1</option> 
 
    <option value="2" data-src="blank2.png">Option 2</option> 
 
    <option data-src="blank3.png">Option 3</option> 
 
    <option data-src="blank4.png">Option 4</option> 
 
</select> 
 

 
<input type="button" id="addItem" value="Add" /> 
 

 
<div class="items"> 
 
    <ul id="tasks"> 
 
    </ul> 
 
</div>