0

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

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

下面的代码解释了我想要做什么。

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

一个例子可以在这里找到

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

我试过使用 .attr("selected" , "") & .removeAttr("selected") 仍然无法在 IE 中工作。

任何帮助是极大的赞赏。

4

2 回答 2

0

试试这样：

$('select').change(function () {
    var $nextSelects = $(this).nextAll('.mySelect');
    $nextSelects.each(function () {
        $(this).val('');
    }); 
});
于 2013-07-12T07:42:59.150 回答
0

这适用于 IE8 我没有 IE7 请检查并恢复

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

演示

第二种方法

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

演示

以下也将起作用

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

演示

注意 jQuery1.10 在 IE6、7、8 中不支持见这里

于 2013-07-12T08:20:52.827 回答