Question

我一直在努力解决这个问题。我所拥有的是父/子选择框彼此相邻，它们是根据选择的父项动态生成的。

我想要做的是，如果我选择一个级别，我会删除所选子项选项上的所选属性。

以下代码解释了我想要做的事情。

    <div id="selectBoxes">
      <select>
        <option value=""></option>
        <option value="parent">Parent</option>
      </select>
      <select class="mySelect">
        <option value=""></option>
        <option value="child">Child</option>
      </select>
      <select class="mySelect">
        <option value=""></option>
        <option value="grandChild">Grandchild</option>
      </select>
    </div>
    <script type="text/javascript">
      $('select').change(function() {
          var $nextSelects = $(this).nextAll('.mySelect');
          $nextSelects.each(function() {
                $(this).find('option:selected').prop("selected" , false);
           });
      });
    </script>

可以找到一个例子here

所以需要发生的是如果选择了所有3个选项并且我向后移动让我们说第一个选择取消选择2个子选项。以上代码适用于FF和Chrome以及IE 9，但不适用于IE 7和IE 7。 8。

我尝试过使用.attr（“selected”，“”）＆amp; .removeAttr（“已选中”）仍无法在IE中使用。

非常感谢任何帮助。

Answer 1

试试这样：

$('select').change(function () {
    var $nextSelects = $(this).nextAll('.mySelect');
    $nextSelects.each(function () {
        $(this).val('');
    }); 
});

Answer 2

这是在IE8中工作我没有IE7请检查并还原

$('select').change(function () {
    var $nextSelects = $(this).nextAll('.mySelect');
    $nextSelects.each(function () {
      $(this).val("").prop("selected", true); 
    });
});

DEMO

第二种方法

$('select').not(".mySelect").change(function () {      
    $(this).siblings('.mySelect').each(function () {
        $(this).find('option[value=""]').prop('selected', true);        
    });
});

DEMO

以下也可以使用

$(this).val("").prop("selected", true);

DEMO

注意在IE6,7,8中不支持jQuery1.10，请参阅here

jquery删除选项不工作的选定属性IE 7＆amp; 8

2 个答案: