CODEWITHSUNDEEP
jquerydynamichtmlshow-hide
Vince P
Vince P

Reputation: 1791

jQuery show/hide on select box - dynamic values

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?

Upvotes: 0

Views: 7844

Answers (5)

Nirav Gandhi
Nirav Gandhi

Reputation: 2005

check this

http://jsfiddle.net/rtXLe/9/

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

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!

Upvotes: 2

Manigandan Arjunan
Manigandan Arjunan

Reputation: 2265

Just manually add the # tag

<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>

Upvotes: 0

Th0rndike
Th0rndike

Reputation: 3436

why dont you add the hash?

    var targetId = '#' + $(this).val();

Upvotes: 0

Steve Greatrex
Steve Greatrex

Reputation: 15999

You just need to manually append the '#' character.

I've updated your jsFiddle as an example:

$("select").change(function() {
    // hide all brands first
    $("div.brandDiv").hide();
    // val is something like #div1 or #div2
    var targetId = "#" + $(this).val(); // <-- manually appending the # character here
    console.log($(targetId).html());
    // show the new selected one
    $(targetId).show();
});​

Upvotes: 0

Related Questions