CODEWITHSUNDEEP
javascriptajax
Peter
Peter

Reputation: 9133

Manipulating dropdowns populated by AJAX

JQuery is my best friend in good and bad Javascript times. However, some times it takes some figuring out for me before I finally achieve my goal. This is one of these days. This they I bumped into a certain issue I can't really find my way around. I'll try explaining it below.

My HTML

<select name="one" id="one">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    ....
</select>
<select name="two" id="two">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    ....
</select>
<select name="three" id="three">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    ....
</select>

My JQuery

$(document).ready(function() {
    if (one != 0) {
        // Set select dropdown one
    }
    if (two != 0) {
        // Set select dropdown two
    }
    if (three != 0) {
        // Set select dropdown three
    }
});

$(document).on('change', '#three', function() {
    var item = $(this).val();
    var url = basePath + 'item/' + item;
    window.location = url;
});

PHP

<script type="text/javascript">
    var one = <?= $one; ?>;
    var two = <?= $two; ?>;
    var two = <?= $three; ?>;
</script>

The issue

What I want to achieve is that when an option is selected in dropdown one, JQuery loads dropdown two. When an option is selected in dropdown two, JQuery loads dropdown three.

I've got this working. However, when dropdown three is selected, it does a refresh. But as soon as that refresh is done, all select values would be set again and another refresh would be triggered.

I want JQuery to only refresh the first time, set all select values after the refresh (thus triggering the change event on the select dropdowns and loading the values) but not refreshing when the third select dropdown value is set.

If I need to do more explaining on this please let me know. Any suggestions and help would be very welcome.

Progress

if (false !== rootpfgroup && false !== hoofdpfgroup && false !== subpfgroup) {
    $('#one').val(rootpfgroup).trigger('change');
    $('#two').val(hoofdpfgroup).trigger('change');
    $('#three').val(subpfgroup);
}

I've found the following to be working. However, it only sets the first dropdown. Selecting a value in the first dropdown triggers an ajax call that loads the options for the second one. Selecting an option in the second drop down triggers an ajax call that loads the options for the third one. Can somebody tell me more on how to go about this and what I'm doing wrong? Thanks in advance.

Upvotes: 0

Views: 295

Answers (2)

Tom Jardine-McNamara
Tom Jardine-McNamara

Reputation: 2618

As per my comment above, setting the selected dropdown value using PHP to set the HTML selected attribute would also work, eliminating your refresh problem and meaning that the value persistence works without JS (whether you care about that is a different matter):

<?php
    $one = '';
    $two = '';
    $three = '';

    if (!empty($_POST['one'])) {
        $one = $_POST['one'];
    }
    if (!empty($_POST['two'])) {
        $two = $_POST['two'];
    }
    if (!empty($_POST['three'])) {
        $three = $_POST['three'];
    }
?>

$(document).on('change', '#three', function() {
    var form = $('#form');
    var item = $(this).val();
    var url = basePath + 'item/' + item;
    form.attr('action', url);
    form.submit();
});

<form action="" method="POST" id="form">
    <select name="one" id="one">
        <option value="1" <?php if ($one == 1):?>selected<?php endif;?>>One</option>
        <option value="2" <?php if ($one == 2):?>selected<?php endif;?>>Two</option>
        <option value="3" <?php if ($one == 3):?>selected<?php endif;?>>Three</option>
    </select>
    <select name="two" id="two">
        <option value="1" <?php if ($two == 1):?>selected<?php endif;?>>One</option>
        <option value="2" <?php if ($two == 2):?>selected<?php endif;?>>Two</option>
        <option value="3" <?php if ($two == 3):?>selected<?php endif;?>>Three</option>
    </select>
    <select name="three" id="three">
        <option value="1" <?php if ($three == 1):?>selected<?php endif;?>>One</option>
        <option value="2" <?php if ($three == 2):?>selected<?php endif;?>>Two</option>
        <option value="3" <?php if ($three == 3):?>selected<?php endif;?>>Three</option>
    </select>
</form>

As I mentioned, depending on what your data actually looks like (assuming it isn't just lists of numbers ;) you might be able to add some loops in your PHP to avoid repetition.

Upvotes: 1

Jesper
Jesper

Reputation: 3834

<?php
$one = '';
$two = '';
$three = '';

if (!empty($_POST['one'])) {
    $one = $_POST['one'];
}
if (!empty($_POST['two'])) {
    $two = $_POST['two'];
}
if (!empty($_POST['three'])) {
    $three = $_POST['three'];
}
?>

$(document).ready(function() {
    var one = '<?= $one; ?>';
    var two = '<?= $two; ?>';
    var three = '<?= $three; ?>';

    if (one != '') {
        $('#one').val(one);
    }
    if (two != '') {
        $('#two').val(two);
    }
    if (three != '') {
        $('#three').val(three);
    }
});

$(document).on('change', '#three', function() {
    var form = $('#form');
    var item = $(this).val();
    var url = basePath + 'item/' + item;
    form.attr('action', url);
    form.submit();
});

<form action="" method="POST" id="form">
    <select name="one" id="one">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <select name="two" id="two">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <select name="three" id="three">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</form>

This should now set the values as intended.

Upvotes: 0

Related Questions