Question

I need some help with this. Basically I have the following code which I have been using. I’m not sure if will help or not…

$('#options-1').change(function () {
  -----blahblah
});

options-1 is my drop down menu. It has two options, one with value ‘1’ and another with value ‘2’. Could you guys please help me come up with something that does the following:

When I select the option with value ‘1’ it should do this:
1) Find an ‘li’ tag that includes an ‘img’ tag. The ‘IMG’ tag will have an ‘alt’ or ‘title’ attribute of 1, which corresponds to the value of the drop down menu (1).

2) The code should change the LI tag from:

class="" style="display: none;"

to

class="active" style="display: block;"

And, the same thing would happen if I select the option with the value ‘2’, or value ‘3’ or so on.

Thank you very much in advance! I would appreciate any help, suggestions, etc for this. As you can probably tell I’m not very experienced with javascript/jquery (yet :D).

Answer 1

assume your select tag looks like this:

<ul id="yourUl">
    <li><img alt="1" /></li>
    <li><img title="2" /></li>
    <li><img alt="3" /></li>
</ul>

<select id="options-1">
    <option value="1">value 1</option>
    <option value="2">value 2</option>
</select>

so, your script will be:

var findLi = function(val){
    $("ul#yourUl li img").each(function(){
        if($(this).attr("alt") == val || $(this).attr("title") == val)
            return $(this).parrent();
        return null;
    }
};

$(document).ready(function () {
    $("#options-1").change(function () {
        var val = $(this).val();
        val li = findLi(val);
        if(li == null)
            // do something to handle null or just ignore
        else
            $(li).addClass("active").css("display", "block");
    });
});

OR use has (thanks @Moin):

$(document).ready(function () {
    $("#options-1").change(function () {
        var val = $(this).val();
        $("ul#yourUl li:has(img[alt='" + val + "']), ul#yourUl li:has(img[title='" + val + "'])").each(function() {
            $(this).addClass("active").css("display", "block");
        });
    });
});

OR

$(document).ready(function () {
    $("#options-1").change(function () {
        var val = $(this).val();
        $("ul#yourUl li img").each(function () {
            if ($(this).attr("alt") == val || $(this).attr("title") == val)
                $(this).parrent().addClass("active").css("display", "block");
        });
    });
});