Question

我正在学习jQuery，在一个项目中我遇到了问题。我想要的是，有一个select框，它有一些值。当我的网页加载时，我希望如果此select框选择了某个值，则会立即显示其div，否则将隐藏div。

我的问题，这里没有发生任何事件，一切都会在页面加载后发生。

我在另一个页面中做了同样的工作，但是当我“选择”某个值时会出现div。但是，我希望在页面加载时发生这种情况。

所以我尝试了：

html代码：

<select class="selector">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
<select class="selector">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
<div class="show" style="display:none;">
    <textarea id="text">Sample Text</textarea>
</div>

这是我的jQuery代码：

<script>
$(document).ready(function(){
  if($('.selector').val()=="volvo")
     $(this).next('.show').show();
});
</script>

所以，我想要的是，如果.selector具有值“volvo”，则其下一个div（具有“show”类）将显示，否则不显示。在这里，我没有使用任何更改事件。我希望在页面加载后发生这种情况。

我也试过了：

if($('.selector').val()=="volvo")
   $(this).next().show();

但同样的结果，没有任何反应，没有出现。

我现在该怎么办？

N.B。：请注意，有多个<select>元素。

Answer 1

您在文档就绪处理程序中使用this，它会在文档中进行裁剪。您应该使用选择绑定更改事件，并在页面加载时触发它。

使用

$(document).ready(function() {
    //Bind change event
    $('.selector').change(function() {
        if ($(this).val() == "volvo") {
            $(this).next('.show').show();
        }
    }).change(); //Trigger on page load
});

Answer 2

在document.ready this中使用时，请勿参阅选择。

你应该说

 $('.selector').next('.show').show();

DEMO

Answer 3

这是解决方案。希望它为你工作： -

<select class="selector">
<option value="select">select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class="show" style="display:none;">
    <textarea id="text">Sample Text</textarea>
</div>

Jquery代码

$(document).ready(function(){
$(".selector").on("change", function(){
    $val = $(this).val()
   // alert($val);

    if($val == "volvo"){
        $(".show").show();
    }else{
     $(".show").hide();
    }
})

});

结帐链接

JSFiddle

jQuery中的next（）函数没有显示下一个div

3 个答案: