CODEWITHSUNDEEP
javascriptphplaravel
daugaard47
daugaard47

Reputation: 1868

How to dynamically change a select fields based on another select fields value?

I need to dynamically change 2 select fields by using a little math and php (a JS solution would be fine too.).

Example: I'm booking a trip...

Adult select field:

@for($adults = 1; $adults<=8; $adults++)
   <option value="{{ $adults }}">{{ $adults }}</option>
@endfor

Based on the Adults number value, this needs to reflect how many Kid spots are left.

Kids select field:

@for($kids = 0; $kids <= 8 - $step->adults; $kids++)
    <option value="{{ $kids }}">{{ $kids }}</option>
@endfor

So some quick examples:

This is a multi-step form and I'm currently storing everything in a session/cookie. As I have it now, the Kids logic only works if I hit the continue button. (Not ideal)

How can I get the Kids to update immediately based on the Adults value before I continue to the next form.

I'm currently using Laravel / PHP, but a JS solution would be acceptable if needed.

I would appreciate any help.

Upvotes: 2

Views: 1861

Answers (3)

Kevin
Kevin

Reputation: 41885

Assuming the dropdowns are in the same screen, since you need not the screen to refresh, you'll need some JS with that and listen to the initial dropdown (adults).

document.querySelector('#num-adults').addEventListener('change', function() {
    var limit = 8;
    var numAdults = parseInt(this.value);
    document.querySelector('#num-children').selectedIndex = 0;
    var childrenOptions = document.querySelectorAll('#num-children option');
    [].forEach.call(childrenOptions, function(option) {
        var optionValue = parseInt(option.value);
        option.disabled = ((numAdults + optionValue) > limit);
    });
});
<select id="num-adults">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
</select>
<select id="num-children">
    <option selected disabled>Select number of children</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>

Upvotes: 1

Boobalan
Boobalan

Reputation: 855

Jquery solution:

$(document).ready(function () {
    $("#adult").change(function () {
        var val = $(this).val();
        if (val == "item1") {
            $("#kid").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#kid").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
        } else if (val == "item3") {
            $("#kid").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        } else if (val == "item0") {
            $("#kid").html("<option value=''>--select one--</option>");
        }
    });
});

Upvotes: 0

user3532758
user3532758

Reputation: 2271

You could use adults select fields onchange event in JS to update kids select field. You can also use JS Object.onchange or Event Listeners.

Upvotes: 0

Related Questions