CODEWITHSUNDEEP
jqueryhtmljquery-plugins
Ebrahim Khalil
Ebrahim Khalil

Reputation: 27

Show-Hide divs using jquery in a dropdown But Not Working

When Form is Blank or i take new from for input something then Div is working. and html like 

<select name="product" class="span4" id="product">
<option value="4">Article</option>
<option value="1">Product</option>
<option value="2">Movie Trailers</option>
<option value="3">Landing Page</option>
</select>

<div class="1 box"> Select Div 1</div>
<div class="2 box"> Select Div 2</div>
<div class="3 box"> Select Div 3</div>
<div class="4 box"> Select Div 4</div>

JavaScript: is 

$(document).ready(function(){
 $('.box').hide();
  $('#product').change(function() {
    $('.box').hide();
    $('.' + $(this).val()).show();
 });
});

But When i go to edit article or product this not working and selected="selected" a category from DB. thin don't show div default which selected div

<select name="product" class="span4" id="product">
<option value="4">Article</option>
<option value="1">Product</option>
<option value="2" selected="selected">Movie Trailers</option>
<option value="3">Landing Page</option>
</select>

Image Screen Short here

I need both of Function Selected & without selected function. Would you like help me :)

Upvotes: 0

Views: 917

Answers (3)

charlietfl
charlietfl

Reputation: 171669

If the issue is you need to display element associated with value at the time of page load, just trigger the change event right after you bind the change event handler.

$('#product').change(function() {
    $('.box').hide();
    $('.' + $(this).val()).show();
 }).change(); // trigger change so the code inside change handler runs and displays correct eleemnt

Another syntax for same thing:

$('#product').change(function() {
    $('.box').hide();
    $('.' + $(this).val()).show();
 }).trigger('change');

DEMO

Upvotes: 1

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

Simply show the box on document.ready like this :

$(document).ready(function(){
 $('.box').hide();
 $('.' + $('#product').val()).show();

  $('#product').change(function() {
    $('.box').hide();
    $('.' + $(this).val()).show();
 });
});

Upvotes: 0

sasi
sasi

Reputation: 4318

Put your code for Change Function Out Side of Ready

$(document).ready(function(){
 $('.box').hide();
});

 $('#product').change(function() {
    $('.box').hide();
    $('.' + $(this).val()).show();
 });

Upvotes: 0

Related Questions