Question

我有一个网站正在制作中，我在这里找到了可以帮助我的代码。我可以按自己的方式自定义它，但现在遇到了问题。我只是希望页面在未选择下拉框值的情况下显示所有div。这是我的代码：

<style type="text/css">
websitesubmission {
display: block;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>

<script>
$('#category_faq').on('change', function () {
$('websitesubmission').hide();
$('websitesubmission.' + $(this).val()).show()
});
</script>

<select id="category_faq">
<option selected value="">Select An Option</option>
<option value="information">info</option>
<option value="news">news</option>
<option value="blog">blog</option>
</select>
<br/>
<websitesubmission class="information">info</websitesubmission> 
<websitesubmission class="news">news</websitesubmission>
<websitesubmission class="blog">blog</websitesubmission>

这是正在工作的JSFiddle：http://jsfiddle.net/fj07nnu3/105/

（已更新，以显示工作解决方案）

以下用户的工作解决方案位于：http://jsfiddle.net/fj07nnu3/124/

Answer 1

只需像这样编辑您的JQuery函数：

$('#category_faq').on('change', function() {
  if ($(this).val() == "") {
    $('websitesubmission').show();
  } else {
    $('websitesubmission').hide();
    $('websitesubmission.' + $(this).val()).show()
  }
});

这个想法很简单，您拥有第一个选择值为“”（空）的选择选项，每次选择选项的值是否为“”时都必须进行检查。

Answer 2

最合适的方法可能是检查所选索引是否是第一个（0），因为与之类似，单个option的值将无关紧要。

从jQuery 1.6开始，您应该能够使用其prop方法$(this).prop('selectedIndex')

堆栈片段

$('#category_faq').on('change', function () {
  if ($(this)[0].selectedIndex == 0) {
    $('websitesubmission').show();
  } else {
    $('websitesubmission').hide();
    $('websitesubmission.' + $(this).val()).show()
  }
});

websitesubmission {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="category_faq">
    <option selected value="">Select An Option</option>
    <option value="information">info</option>
    <option value="news">news</option>
    <option value="blog">blog</option>
</select>
<br/>
<websitesubmission class="information">info</websitesubmission> 
<websitesubmission class="news">news</websitesubmission>
<websitesubmission class="blog">blog</websitesubmission>

Answer 3

通过使用选定的文本，您可以做到

$('#category_faq').on('change', function () {
    if($(this).val() == "") {
        $('websitesubmission').show();
    } else {

       $('websitesubmission').hide();
       $('websitesubmission.' + $(this).val()).show()
   }
});

Answer 4

请尝试以下代码：

$('#category_faq').on('change', function () {
    $('websitesubmission').hide();
    if($(this).val() != ""){
    $('websitesubmission.' + $(this).val()).show()
    }else{
    $('websitesubmission').show()
    }
});

带下拉框仅显示选定的Div，但在未选择任何选项时显示所有Div

4 个答案: