Question

我对JQuery很新。我已经为Add＆amp;编写了一个代码。从选定列表框中删除代码。在这里，添加来自不同选择列表框的前三个值，但是，我无法实现删除我添加的这三个值。 HTML：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select class="form-control select-manage-category" size="5">
        <option>1</option>
        <option>2</option>
        <option>1</option>
        <option>2</option>
    </select>
</div>
<div>
    <select class="form-control select-manage-category1" size="5">
        <option>1</option>
        <option>2</option>
        <option>1</option>
        <option>2</option>
    </select>
</div>
<div>
    <select class="form-control select-manage-category2" size="5">
        <option>1</option>
        <option>2</option>
        <option>1</option>
        <option>2</option>
    </select>
</div>
<div>
    <p class="text-center color-red">You can add up to 20 categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category">
<input id="remove-category" name="add" type="button" value="Remove Category">
<div>
    <select id="selected-lst-values" class="form-group percent-100" size="5"></select>
</div>
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong> <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span></button>

CSS：

.select-manage-category, .select-manage-category1, .select-manage-category2 {
    width: 100px;
    float: left;
    margin-right: 4px;
}

p {
    clear: left;
    text-align: center;
}

#selected-lst-values {
    width: 100%;
}

JQuery的：

$(document).ready(function () {
    var one = $('.select-manage-category').val();
    var two = $('.select-manage-category1').val();
    var three = $('.select-manage-category2').val();
    $('#add-category').click(function () {
        $(
            '.select-manage-category, .select-manage-category1, .select-manage-category2'
        ).each(function () {
            // $('#selected-lst-values').append($(this).val());
            $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
        });
    });
    $('#remove-category').click(function () {
        $('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function () {
            $('#selected-lst-values')
                .find('option[value="' + $(this).val() + '"')
                .remove();
        });
    });
});

Working Fiddle

Answer 1

你所以关闭！如果您检查控制台日志，您会看到.find()无法找到目标，因为您错过了结束方括号。

您只需要：

.find('option[value="' + $(this).val() + '"]')

$(document).ready(function() {
  var one = $('.select-manage-category').val();
  var two = $('.select-manage-category1').val();
  var three = $('.select-manage-category2').val();
  $('#add-category').click(function() {
    $(
      '.select-manage-category, .select-manage-category1, .select-manage-category2'
    ).each(function() {
      // $('#selected-lst-values').append($(this).val());
      $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
    });
  });
  $('#remove-category').click(function() {
    $('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function() {
      $('#selected-lst-values')
        .find('option[value="' + $(this).val() + '"]')
        .remove();
    });
  });
});

.select-manage-category,
.select-manage-category1,
.select-manage-category2 {
  width: 100px;
  float: left;
  margin-right: 4px;
}

p {
  clear: left;
  text-align: center;
}

#selected-lst-values {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="form-control select-manage-category" size="5">
    <option>1</option>
    <option>2</option>
  </select>
</div>
<div>
  <select class="form-control select-manage-category1" size="5">
    <option>1</option>
    <option>2</option>
  </select>
</div>
<div>
  <select class="form-control select-manage-category2" size="5">
    <option>1</option>
    <option>2</option>
  </select>
</div>
<div>
  <p class="text-center color-red">You can add up to 20 categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category">
<input id="remove-category" name="add" type="button" value="Remove Category">
<div>
  <select id="selected-lst-values" class="form-group percent-100" size="5">
  </select>
</div>
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong>
  <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span>
</button>

我还创建了一个更新的工作小提琴here。

希望这会有所帮助：）

修改：

要删除最后三个值，然后能够删除之前的三个值，直到所有值都消失，您需要使用CSS选择器last-of-type：

var the_index = $(this).val() - 1; $('#selected-lst-values').find('option:nth-last-of-type(' + the_index + ')').remove();

$(document).ready(function() { var one = $('.select-manage-category').val(); var two = $('.select-manage-category1').val(); var three = $('.select-manage-category2').val(); $('#add-category').click(function() { $( '.select-manage-category, .select-manage-category1, .select-manage-category2' ).each(function() { $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>'); }); }); $('#remove-category').click(function() { $('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function() { var the_index = $(this).val() - 1; $('#selected-lst-values') .find('option:nth-last-of-type(' + the_index + ')') .remove(); }); }); });

.select-manage-category,.select-manage-category1,.select-manage-category2{ width:100px; float:left; margin-right:4px; } p{clear:left;text-align:center;} #selected-lst-values{ width:100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div><select class="form-control select-manage-category" size="5"> <option>1</option> <option>2</option> </select></div> <div><select class="form-control select-manage-category1" size="5"> <option>1</option> <option>2</option> </select></div> <div><select class="form-control select-manage-category2" size="5"> <option>1</option> <option>2</option> </select> </div> <div> <p class="text-center color-red">You can add up to 20 categories</p></div> <input id="add-category" name="add" type="button" value="Add Category"> <input id="remove-category" name="add" type="button" value="Remove Category"> <div><select id="selected-lst-values" class="form-group percent-100" size="5"> </select></div> <button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong> <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span> </button>

这基于单击按钮删除<select>列表中的最后三个选项，并且当您一次添加三个选项时，最后三个选项将是您刚添加的选项。

我已经更新了我的小提示，以展示这个here。

请注意，如果您愿意，也可以只使用.find('option').remove();一次删除所有类别。

希望这会有所帮助：）

如何在按钮上单击

1 个答案: