Question

I have a project I am working on that needs to show/hide a division dependent on a selection.

I’m using the following code as my basis: (which can be seen working at http://jsfiddle.net/rtXLe/)

<select>
    <option value="#divA">a</option>
    <option value="#divB">b</option>
</select>

<div id="divA" class="brandDiv">brand A</div>
<div id="divB" class="brandDiv">brand B</div>

<script type="text/javascript">
    $(function() {
        $("select").change(function() {
            // hide all brands first
            $("div.brandDiv").hide();
            // val is something like #div1 or #div2
            var targetId = $(this).val();
            // show the new selected one
            $(targetId).show();
        });
    });         
</script>

My problem is that the values in the select box cannot be changed as they are dynamically created and reference something else, so they will be:

<select>
    <option value="3135">a</option>
    <option value="3136">b</option>
</select>

<div id="3135" class="brandDiv">brand A</div>
<div id="3136" class="brandDiv">brand B</div>

With that though there is obviously the hash tag missing from the value, which then isn’t able to be picked up by the jQuery.

What do I need to modify in the jQuery for the divisions to work?

Answer 1

Here it is Working: http://jsfiddle.net/jhRHg/5/

HTML:

<select>
    <option value="3135">a</option>
    <option value="3136">b</option>
</select>

<div id="3135" class="brandDiv">brand A</div>
<div id="3136" class="brandDiv">brand B</div>
​

JQuery:

$("select").change(function() {
    // hide all brands first
    $("div.brandDiv").hide();
    // val is something like #div1 or #div2
    var targetId = $(this).val();

    console.log($(targetId).html());
    // show the new selected one
    $("#"+targetId).show();
});​

This will help, cheers!