Disable specific second dropdown option based on selected first dropdown option in Laravel Voyager

  jquery, laravel, php, voyager

I am a beginner in Laravel and working on a Laravel Voyager admin panel and I have a BREAD table to store user’s addresses. There are three dropdowns where user needs to choose their country, followed by state and city. When user selects a certain country, the options for the second dropdown will be restricted. For example, if the user chooses America, the options containing Scotland and Wales in the second dropdown will be disabled, since both are in the UK. The JSON fields for all three dropdowns look like this:

First dropdown, Country JSON field:

{
    "display": {
        "id": "country_id"
 },
    "default": "United States of America",
    "options": {
        "US": "United States of America",
        "UK": "United Kingdom"
    }}

Second dropdown, State JSON field:

{
    "display": {
        "id": "state_id"
    },
    "default": "Alabama",
    "options": {
        "ABM": "Alabama",
        "SC": "Scotland"
    }}

Third dropdown also briefly looks like above with the id "city_id". To change the value of the next dropdowns, in my edit-add.blade.php file I used the ‘change’ function in jQuery to detect when user selects the value in the first dropdown and called using the id in the JSON field:

@section('javascript')
    <script>  
    $('#country_id').change(function(){
                $country = $("#country_id").val();
                switch ($country){
                    //case "US" : 
                }
            });
    </script>

I am not sure whether what I did is right or not. Also, how do I fetch the values for the second dropdown and disable the unneeded options?

Edited:

I tried doing the following for my jQuery but it doesn’t work in the BREAD form. Even if I clicked on USA option, I can still choose Scotland.

(edit-add.blade.php file):

    @section('javascript')
            <script>  
            $('#country_id').change(function(){
                        $country = $("#country_id").val();
                        switch ($country){
                            case "US" : $("#state_id option[value='SC']").attr("disabled","disabled");
                                        break;
                        }
                    });
            </script>

Plase, anyone who knows can you help?

Source: Laravel

Leave a Reply