I know this is a duplicate question, but that question doesn't help me, because my problem is a little different.
This is my html code :
<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;"></div>
This is my jQuery code :
if($('.selector').val()=="volvo")
$(this).next('.show').show();
So, what I want is, if the <selector> has the value "volvo", its next div(which has the class "show") will show up, otherwise not. Here, I am not using any change event. I want this happen after the page has been loaded.
I tried this too :
if($('.selector').val()=="volvo")
$(this).next().show();
But same result, nothing happens, the <div> doesn't show up.
What should I do now ?
Class selector is used as .class with a . preceding the class name.
$('.selector').val()
Without a event handler $(this) cannot refer to the select element, it refers the window element.
Use the following code,
var $selector = $('.selector');
if($selector.val()=="volvo")
$selector.next('.show').show();