filtering div classes based on dropdown selection with jquery

0
votes

I'm using Jquery 1.6. I have a dropdown list that has a bunch of options.

I'm trying to make my dropdown hide divs based on the value of dropdown.

If I select from the dropdown list "option 1.8" i want it to look at the value attribute and based on the last three characters in the value find all div classes that end with the same characters and hide those.

The script below works but the problem is that i want it so that my "value" in my dropdown doesn't have to be the same name as my class names I have in my html. This is why i wanted it to find the last part of the values.

<script type='text/javascript'>
$(window).load(function(){
$("#version-select").bind("change", function() {
    $("div").filter('.' + this.value).show().siblings().hide();
});
});  
</script>


<select name="version-select" id="version-select">
    <option value="option_1_6">Option 1.6</option>
    <option value="option_1_7">Option 1.7</option>
    <option value="option_1_8">Option 1.8</option>
    <option value="option_2_0">Option 2.0</option>
</select>

<div class="class_1_6">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

<div class="table_info_1_7">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

<div class="class_1_8">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

Any help with getting it to find the last part of the values based on the option i select in the dropdown would be helpfull.

2
jqueryfilterhideshow
I think those DIV's should be inside a list (UL element)... - Šime Vidas

2 Answers

1
votes

Check this fiddle. I have used jqueryEndsWithSelector.

$('#version-select').change(function(){
    var val = $(this).val();
    var lastThreeChars = val.substring(val.length - 3);
    $('div').hide();
    $('div[class$="' + lastThreeChars + '"]').show();
});
0
votes

Try using something like:

$(function(){   
    $("#version-select").bind("change", function() {
        var value = $(this).find("option:selected").val();
        var last3chars = value.substring( value.length - 3)
        $("div").hide();
        $(".class_" + last3chars).show();
    });
});

See a demo: http://jsfiddle.net/7YSPS/2/