关闭其他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")会在select下获取所有.static-website个标记，但您想要的是.static-website本身。此外，您可能希望仅针对div过滤兄弟姐妹。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;