Question

我有这个HTML代码：

<div class="mws-form-item prova">
   <select class="target" id="select1">
      <option value="noselected" selected="selected"></option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
  </select>
  <select class="target">
      <option value="noselected" selected="selected"></option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
  </select>
  <select class="target">
      <option value="noselected" selected="selected"></option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
  </select>
  <input type="number" style="width: 35px" min="1" max="99" value="1">
</div>

和jQuery代码：

 $(document).on('change', '.prova> .target', function () { //line 1
    ...
    $( "select" ).each(function( index ) {
        $(this).children().each(function () {
            if (this.innerHTML === selectedValue) {
                $(this).remove();
            }
        });
    });
    ...
});

删除符合if条件的<select>的所有子项。如上所述，通过这种方式，所有<select>都会受到影响，而我希望此选择不会受到影响。所以我想以这种方式使用.siblings()：

 $(document).on('change', '.myclass > .target', function () { //line 1
    ...
    $(this).siblings().each(function( index ) {
        $(this).childrens().each(function () {
            if (this.innerHTML === selectedValue) {
                $(this).remove();
            }
        });
    });
    ...
});

但这不起作用！

然后：是否还有另一种方式可以引用除特定选择之外的所有选择？

Answer 1

您可以利用change事件触发<select>元素并删除触发事件的事件。像这样修改你的第一个片段：

$( "select" ).not(this).each(...)

那就是说，恕我直言，首先用他们的类（<select>）引用> .target元素，然后用他们的元素名称来引用它们是非常令人困惑的 - 你为什么不标准化？

Answer 2

$(document).on('change', '.mws-form-item > .target', function () {
    var selectedValue = this.value;
    $(this).siblings('select').children().filter(function () {
        return $(this).text() == selectedValue;
    }).remove();
});

Answer 3

可能是因为你无法使用

this

这样的内部功能。它是一个命名空间问题。

试试这个

$(document).on('change', '.myclass > .target', function () { //line 1
...
var self = $(this)
$(this).siblings().each(function( index ) 
        self.children().each(function () {
          //HERE THIS IS REFERING TO OPTIONS, RIGHT?
          if (this.innerHTML === selectedValue) {
        self.remove();
          }
        });   
    });
 ...
});

注意我已经改变了孩子对孩子的兴趣＆＃34;还

在jQuery中使用.siblings（）

3 个答案: