CODEWITHSUNDEEP
javascriptjquery
user1261800
user1261800

Reputation:

Jquery/Js: Hide/Show Divs based on select box option values

These are Dynamic dependent select controls. The sets of values of (1-3, 4-6, 7-9) determine the use hide/show divs function. The problem is the function i have only hide/show depending on the div id. How can i make the function hide/show div depended on the values(1-3, 4-6, 7-9) found in the selectbox?

Jquery

$('#select').change(function() {
   $('#sub1, #sub2, #sub3').hide();
   $('#sub' + $(this).find('option:selected').attr('id')).show();
});

Html Setup

<html>
<select size="6" id="category">
     <option value="">categories 1-3 </option>
     <option value="">----</option>
     <option value="">----</option>
</select>

<div id="sub1" style="display:none">
<select name="subc1" size="6">
     <option value="1">subcategories 4-6</option>
     <option value="2">---</option>
     <option value="3">---</option>
</select>
</div>

<div id="sub2" style="display:none">
<select name="subc2" size="6">
      <option value="4">subcategories 7-9</option>
      <option value="5">----</option>
      <option value="6">----</option>
</select>
</div>

<div id="sub3" style="display:none">
<select name="subc3" size="6">
      <option value="7">End</option>
      <option value="8">----</option>
      <option value="9">----</option>
</select>   
</div>
</html>

Upvotes: 0

Views: 3726

Answers (4)

thecodeparadox
thecodeparadox

Reputation: 87073

You nee to change minor change in your category select

<select size="6" id="category">
     <option value="1">categories 1-3 </option>
     <option value="2">----</option>
     <option value="3">----</option>
</select>


$('select#category').on('change', function() {
  $('div[id=^sub]:visible').hide();
  $('div#sub' + this.value).show();
});

can also use .change() instead of .on('change').

 $('select#category').change(function() {
  $('div[id=^sub]:visible').hide();
  $('div#sub' + this.value).show();
});

NOTE:

$('div[id=^sub]:visible') will point to all divs that have id start with sub and visible.

You are trying with $('#select') which need to be $('#category') or $('select#category').

According to your comment:

Complete solution will look like following:

function isOnlyDashed(text) {
    return text.replace(/-/g, '').length === 0;
}

$('select#category').change(function() {
    var text = $('option:selected', this).text();
    if (!isOnlyDashed(text)) {
        $('div[id=^sub]:visible').hide();
        $('div#sub' + this.value).show();
    }
});


$('select[name^=subc]').change(function() {
    var text = $('option:selected', this).text();
    if (!isOnlyDashed(text)) {
        $(this).parent() // jump to parent div
        .next('div[id^=sub]:hidden') // go to next hidden div
        .show();
    }
});

Complete Workout

Upvotes: 0

Talha
Talha

Reputation: 19242

select the value from drop down change function and do the operation depends on the value of drop down, following is the sample code

$(function() // Shorthand for $(document).ready(function() {
      $('select').change(function() {
            if($(this).val() == 1)
            {
              $('#sub1').hide();
              $('#sub2').show();
            }
      });
});

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

working demo http://jsfiddle.net/FwBb2/1/

I have made minor changes in your Jquery code as well as added value in your first select drop-down list which was missing rest hope this helps.

Please lemme know if I missed anything! B-)

code

$('select').change(function() {
   $('#sub1, #sub2, #sub3').hide();

   $('#sub' + $(this).val()).show();
});​

HTML

<html>
<select id="category">
     <option value="1">categories 1-3 </option>
     <option value="2">----</option>
     <option value="3">----</option>
</select>

<div id="sub1" style="display:none">
<select name="subc1" size="6">
     <option value="1">subcategories 4-6</option>
     <option value="2">---</option>
     <option value="3">---</option>
</select>
</div>

<div id="sub2" style="display:none">
<select name="subc2" size="6">
      <option value="4">subcategories 7-9</option>
      <option value="5">----</option>
      <option value="6">----</option>
</select>
</div>

<div id="sub3" style="display:none">
<select name="subc3" size="6">
      <option value="7">End</option>
      <option value="8">----</option>
      <option value="9">----</option>
</select>   
</div>
</html>​

Upvotes: 0

JohnFx
JohnFx

Reputation: 34909

The problem with your code is that you have an incorrect selector.

$('#select')...

should be

$('select')...

Also, this part is wrong

  $('#sub' + $(this).find('option:selected').attr('id')).show();

Replace it with this 

  $('#sub' + $(this).val()).show();

Finally, having different elements with the same name/id "sub1" is probably a bad idea, though technically not illegal. It is certainly confusing.

Upvotes: 0

Related Questions