0

我有这个 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();
            }
        });
    });
    ...
});

这将删除<select>与 if 条件匹配的所有子项。如前所述，这样所有的<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();
            }
        });
    });
    ...
});

但这不起作用！

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

4

3 回答 3

1

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

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

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

于 2013-06-16T19:18:37.700 回答
1 
$(document).on('change', '.mws-form-item > .target', function () {
    var selectedValue = this.value;
    $(this).siblings('select').children().filter(function () {
        return $(this).text() == selectedValue;
    }).remove();
});
于 2013-06-16T19:22:07.117 回答
-2

可能是因为你不能使用

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

注意我也把“孩子们改成了孩子们”

于 2013-06-16T19:22:23.480 回答