Question

不确定这是否是防止附加到列表中的重复项的最佳方法，但是，我想要采用的路线如下：

从下拉列表中提交选定的选项后，我会在下拉列表中隐藏该选项，以防止再次选择该选项。

以下是当前jQuery正在创建附加列表：

$(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：

<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时发现了很多代码，但没有根据提交的附加列表项隐藏下拉列表选项。

如果需要澄清，请告诉我。谢谢你的帮助。

Answer 1

尝试这种方式（添加$（'＃searchresults'）。find（“：selected”）。remove（）;在追加之后）：

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

＆＃13;

$(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('');
  });


});

＆＃13;

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

＆＃13;

通过隐藏选项jquery防止重复提交到附加列表

2 个答案: