关闭其他div并在jquery中的下拉列表中保持选中的一个打开

Question

我想隐藏所有的兄弟姐妹

我有一个这样的布局

                <label class=""><b>Design Level</b>
                    <select class="static-website">
                            <option>--------Select--------</option>
                            <option value="basic-design">Basic Design</option>
                            <option value="business-design">Business Design</option>
                            <option value="creative-design">Creative Design</option>
                    </select>
                </label>
                 <br/>

            <div class="static-basic-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="5" />
                </label>

             </div><!-- End of Basic Static Box -->

             <div class="static-business-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="10" />
                </label>

             </div><!-- End of BUSINESS Static Box -->

             <div class="static-creative-design">

                <label class="no-pages-static"><b>Number Of Pages</b>
                    <input type="text" name="no-pages-static" value="5" />
                </label>

             </div><!-- End of Creative Static Box -->

我们的jquery是这样编写的：

=

$(".static-website select").on('change',function(e){
    var selectedopt=$(this).val();
    $('.static-'+selectedopt).siblings().hide(); (this is not working)
    $('.static-'+selectedopt).show();

});

但是它看起来像$('.static-'+selectedopt).siblings().hide()；这不起作用。

谢谢!

Answer 1

问题是您的更改选择器$(".static-website select")会让您获得.static-website下的所有select标记，但您想要的是.static-website本身。此外，您可能希望只过滤div的同级。

​

$(".static-website").on('change', function(e) {
  var selectedopt = $(this).val();
  $('.static-' + selectedopt).siblings("div").hide();
  $('.static-' + selectedopt).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class=""><b>Design Level</b>
  <select class="static-website">
    <option>--------Select--------</option>
    <option value="basic-design">Basic Design</option>
    <option value="business-design">Business Design</option>
    <option value="creative-design">Creative Design</option>
  </select>
</label>
<br/>

<div class="static-basic-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="5" />
  </label>

</div>
<!-- End of Basic Static Box -->

<div class="static-business-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="10" />
  </label>

</div>
<!-- End of BUSINESS Static Box -->

<div class="static-creative-design">

  <label class="no-pages-static"><b>Number Of Pages</b>
    <input type="text" name="no-pages-static" value="5" />
  </label>

</div>
<!-- End of Creative Static Box -->

​