jquery to dynamically pick up the ID parameter in a <select> tag

2 Views

EDIT:
When I added the stripped down html I forget to assign unique ID’s to the div tags.

I fixed that in the html below.

Read More

Original Post:
I have a working WordPress shortcode that creates a drop down list. When you make a selection a link appears below the drop down.

The problem I am trying to solve is how to get the jquery to work on the second drop down list, i.e. ‘foo2’ or any number of drop down lists created on the page from the same sortcode.

For example, here is the html generated from using the shortcode twice on the same page. 

<select id="foo1">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 1</option>
    <option value="option2">Module 2</option>
</select>

<div id="m1-option1" class="bar" style="display: none;"><a href="#">download M1</a></div>
<div id="m1-option2" class="bar" style="display: none;"><a href="#">download M2</a></div>

<select id="foo2">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 110</option>
    <option value="option2">Module 220</option>
</select>

<div id="m2-option1" class="bar" style="display: none;"><a href="#">download M110</a></div>
<div id="m2-option2" class="bar" style="display: none;"><a href="#">download M220</a></div>

Here is the jquery: (working demo: http://jsfiddle.net/hookedonweb/t7cSg/)

I don’t want the jquery to work on all <select> tags just the ones from the shortcode, It’s no problem to add another identifier in the html to single out <select>‘s from the shortcode. 

jQuery(document).ready(function ($) {
    $('.bar').hide();
    $('#foo1').change(function () {
        $('.bar').hide();
        $('#'+$(this).val()).show();
    })
});
Post Views: 2

Related posts

Leave a Reply

4 comments

  1. Updated JSFiddle: http://jsfiddle.net/t7cSg/5/

    This may not be the BEST solution because once the plugin is updated you will need to remember to make this change, BUT, perhaps you can give a class to that short-code result.

    So for example:

    <select id="foo1" class="foos">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 1</option>
    <option value="option2">Module 2</option>
</select>

<div id="option1" class="bar" style="display: none;"><a href="#">download M1</a></div>
<div id="option2" class="bar" style="display: none;"><a href="#">download M2</a></div>

<select id="foo2" class="foos">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 110</option>
    <option value="option2">Module 220</option>
</select>

<div id="option3" class="bar" style="display: none;"><a href="#">download M110</a></div>
<div id="option4" class="bar" style="display: none;"><a href="#">download M220</a></div>

<select id="foo3" class="foos">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 110</option>
    <option value="option2">Module 220</option>
</select>

<div id="option5" class="bar" style="display: none;"><a href="#">download M110</a></div>
<div id="option6" class="bar" style="display: none;"><a href="#">download M220</a></div>

    And your jQuery as such:

    jQuery(document).ready(function ($) {
    $('.bar').hide();
    $('.foos).change(function () {
        $('.bar').hide();
        $('#'+$(this).val()).show();
    })
});

    I hope this works/helps

  2. Try this

    jQuery(document).ready(function ($) {
    $('.bar').hide();
    $('[id*="foo"]').change(function () {
        $('.bar').hide();
        $('#'+$(this).val()).show();
    })
});

    Also remember that ID in a page is supposed to be unique.

    You can use the attribute contains selector * or just add the same class to all the selects.

  3. Couldn’t you give the selects you want to use a class instead (e.g. foo) and then just target that?

    $('.bar').hide();
$('.foo').change(function () {
    $('.bar').hide();
    $('#' + $(this).val()).show();
})

    jsFiddle example

  4. Try this:

    jQuery(document).ready(function ($) {
    $('.bar').hide();
    $('#foo1').change(function () {
      $('.bar').hide();
      $('[id="'+$(this).val()+'"]').show();
    });
});

    Note:

    Same id are not allowed for multiple elements on a single document. If this happens only first of it will get executed.