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

Question

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

I can have 8 travelers total.
1 traveler needs to be an adult
The rest can be 7 kids if needed

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:

1 adult = 0-7 kids
2 adults = 0-6 kids
3 adults = 0-5 kids
4 adults = 0-4 kids etc..

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.

then you really need a JS solution if you'd like the page not refresh, do take note you'd still need to validate in server once submitted. — Kevin, Nov 15 '19 at 06:43
@Kevin Agreed on the JS advice. I'm validating everything via my controller. — daugaard47, Nov 15 '19 at 06:46
Have you seen this / possible duplicate: [https://stackoverflow.com/a/6364795/12200949](https://stackoverflow.com/a/6364795/12200949) — Nicolas Goosen, Nov 15 '19 at 07:09
@NicolasGoosen I did not see that question, but reviewing now. — daugaard47, Nov 15 '19 at 07:24

score 1 · Accepted Answer · answered Nov 15 '19 at 07:32

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>

This works really well. Just what I was needing. The only thing I changed was `option.disabled` to `option.hidden` Thanks so much for the help! — daugaard47, Nov 15 '19 at 07:49

score 0 · Answer 2 · answered Nov 15 '19 at 07:03

0

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.

answered Nov 15 '19 at 07:03

user3532758

2,221
1
12
17

score 0 · Answer 3 · answered Nov 15 '19 at 07:09

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>");
        }
    });
});

I might be able to fiddle around with this to get it working. I actually only need number values for the adults and kids. Adults 1-8 and Kids 0-7. Thanks for a decent starting point! — daugaard47, Nov 15 '19 at 07:22

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

3 Answers3