Question

当我清空一个div然后使用基于所选选项的选择附加另一个div时，我的行为非常奇怪。难以解释。当您选择并选择它有效时，但当您返回并再次选择相同的选项组时，它将完全停止工作。请看一下他的例子：http://jsbin.com/akeboz/3/

这可能是我再次以错误的方式做到这一点：P但你觉得它有什么不对呢？

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
<script>
$(document).ready(function(){
  $('#carSelect').change(function(){
    currentBrand = $(this).find('option:selected').data('brand');
    $('#carContainer').empty();
    $('#car_'+currentBrand).show().appendTo('#carContainer');
  });
});
</script>
</head>
<body>

  <form>

     <select id="carSelect">
          <optgroup label="Swedish Cars">
            <option data-brand='volvo' value="volvo">Volvo</option>
            <option data-brand='saab' value="saab">Saab</option>
          </optgroup>
          <optgroup label="German Cars">
            <option data-brand='mercedes' value="mercedes">Mercedes</option>
            <option data-brand='audi' value="audi">Audi</option>
          </optgroup>
      </select>

      <div id="carContainer"></div>

  </form>

  <div style="display:none;">

      <div id="car_audi">
          audi stuff
      </div>

      <div id="car_mercedes">
          mercedes stuff
      </div>

  </div>


</body>
</html>

Answer 1

你正在追加，但是当你选择其他东西时会破坏你追加的内容，所以没有办法让它恢复。

你想要克隆它，并附加克隆。

$('#car_'+currentBrand).clone().show().appendTo('#carContainer');

此外，不需要.show()，因为它们是隐藏的父级，而不是元素本身。

最终，我认为将内容嵌套在每种车型中会更好，并在完成后再将其放回（在抓取新内容之前）。

这样你就不会经常破坏和重建DOM元素。

像这样：

 <div style="display:none;">

      <div id="car_audi">
          <div>audi stuff</div>
      </div>

      <div id="car_mercedes">
          <div>mercedes stuff</div>
      </div>

 </div>

然后这个：

 var currentBrand; 
 var container = $('#carContainer');

 $('#carSelect').change(function(){
     if( container.children().length ) {
         if( currentBrand ) {
             container.children().appendTo( '#car_'+currentBrand );
         } else {
             container.empty();
         }
     }
     currentBrand = $(this).find('option:selected').data('brand');
     container.append($('#car_'+currentBrand).children());
 });

Answer 2

当您致电empty()时，您正在删除原始div，如果您这样做，您的代码就会有效 -

$('#car_'+currentBrand).clone().show().appendTo('#carContainer');

这将在复制div之前克隆div，然后在empty()调用而不是原始div上删除div的克隆。

选择带有jquery选择器的optgroup在第一次选择后停止工作

2 个答案: