JavaScript count in line with PHP loop

Question

I have a page with two drop-down menus. The option selected in the first drop-down menu controls what is displayed in the second.

The code was nice and easy when the drop-down menus were only used once - but I'm looking to repeat each set of drop-down menus four times.

Drop-down menu one is assigned the ID experience[<?php echo $i; ?>][manufacturer]. Drop-down menu two is assigned the ID experience[<?php echo $i; ?>][type].

Essentially, what I've got is:

<select id="experience[1][manufacturer]">...</select>
<select id="experience[2][manufacturer]">...</select>
<select id="experience[3][manufacturer]">...</select>
<select id="experience[4][manufacturer]">...</select>

... followed by:

<select id="experience[1][type]">...</select>
<select id="experience[2][type]">...</select>
<select id="experience[3][type]">...</select>
<select id="experience[4][type]">...</select>

I'm wondering: what's the best way to get the equivalent of <?php echo $i; ?> into the chunk of JavaScript that's used to output the contents of the second drop-down menu? (I know I can't use PHP directly within JavaScript like this - I just left the <?php echo $i; ?> snippets to indicate where I need to output numbers 1, 2, 3, 4 etc.

Thanks for your help!

Code:

<form>

<?php

$i=1;

while($i<=4) {

?>

    <select id="experience[<?php echo $i; ?>][manufacturer]">
    <option value="Ford">Ford</option>
    <option value="Honda">Honda</option>
    <option value="Mercedes">Mercedes</option>
    </select>

    <select id="experience[<?php echo $i; ?>][type]">

    <script type='text/javascript'>
    $(document).ready(function() {
        $("#experience[<?php echo $i; ?>][manufacturer]").change(function() {
            $("#experience[<?php echo $i; ?>][type]").load("get_type.php?choice=" + $("#experience[<?php echo $i; ?>][manufacturer]").val());
        });
    });
    </script>

    </select>

<?php

$i++;

}

?>

</form>

Revised code:

<form>

<script type='text/javascript'>
    $(document).ready(function() {
        $(".experienceManufacturer").change(function() {
            $("#experience["+$(this).attr('data-id')+"][type]").load("get_type.php?choice=" + $(this).val());
        });
    });
    </script>

<?php $i=1;
while($i<=4) { ?>

    <select id="experience[<?php echo $i; ?>][manufacturer]" class="experienceManufacturer" data-id="<?php echo $i; ?>">
    <option value="Ford">Ford</option>
    <option value="Honda">Honda</option>
    <option value="Mercedes">Mercedes</option>
    </select>

    <select id="experience[<?php echo $i; ?>][type]">
    </select>

<?php
$i++;
}
?>

</form>

Anything you output from PHP is fixed once it gets to the browser, unless you modify it with Javascript. Your best approach is probably to emit the array of options in a form Javascript can use and let Javascript handle the drop-down menus. — , Jul 17 '13 at 19:54

Y0lk · Answer 1 · 2013-07-19T19:10:06.380

0

Instead of repeating the same javascript code 4 times, put it outside your loop and give classes to your select elements and use them as selectors for your jquery code. You could then add an attribute (named data-id for example) to your select elements containg their ids. It would look something like this

<select id="experience[<?php echo $i; ?>][manufacturer]" class="experienceManufacturer" data-id="<?php echo $i; ?>">
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Mercedes">Mercedes</option>
</select>
<select id="experience[<?php echo $i; ?>][type]"></select>

And your javascript code (outside the loop) would look something like this

$(document).ready(function() {
    $(".experienceManufacturer").change(function() {
        $("#experience\\["+$(this).attr('data-id')+"\\]\\[type\\]").load("get_type.php?choice=" + $(this).val());
    });
});

Note that I used the keyword "this" inside the change event which references to the select element.

Edit: Added backslashes to escape the brackets in the jQuery selector (or else jQuery interprets it as an attribute).

edited Jul 19 '13 at 19:10

answered Jul 17 '13 at 19:57

Y0lk

396
5
18

Thanks for your answer. I'm away from my home PC this evening but this looks like a good solution. I'll give it a try and, of course, I'll mark it as an answer if all works well! – Martin Jul 17 '13 at 20:12
Unfortunately that didn't work. The second drop-down is just refusing to update when I make a selection in the first. I'll post my revised code in my original question, just in case I've missed something out... – Martin Jul 18 '13 at 13:46
My bad, since you're using brackets in your id, jQuery interprets them as attribute selectors. See this post for more info about that : http://stackoverflow.com/questions/739695/jquery-selector-value-escaping I edited my answer to escape the brackets – Y0lk Jul 19 '13 at 19:08

score 0 · Answer 2 · answered Jul 17 '13 at 20:00

You should not need to include the script element in your PHP loop.

Instead, you should add a similar class to all common select elements. Something like class="experience"

Then, with a single script element you can attach events to all the selects:

<script type='text/javascript'>
    $(document).ready(function() {
        $("select.experience").each(function(i,element){
            // here element is the actual item from the selected set, i is its index
            $(element).on("change", function() {
                $("#experience[" + i + "][type]").load("get_type.php?choice=" + $(element).val());
            });
        });
    });
</script>

JavaScript count in line with PHP loop

2 Answers2