How do I update one dropdown according to values selected in another

问题

I'm using the Chosen jQuery plugin to build a form. I'd like the option in one dropdown to dictate which options in a second dropdown are available.

The first dropdown is called taxa The second dropdown is called survey

So far I have this:

        <select data-placeholder="Choose a area of interest..." name="taxa" id="taxa" class="chzn-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <option value="he">Herps</option>
            <option value="ba">Bats</option>
            <option value="bi">Birds</option>
            <option value="ha">Habitat</option>
        </select>
        <br />
        <br />
        <select data-placeholder="Choose a survey..." name="survey" id="survey" class="chzn-select" style="width:350px;" tabindex="3">
            <option value=""></option>
            <option disabled value="op">Opportunistic</option>
            <option disabled value="tr">Transect</option>
            <option disabled value="mn">Mist Netting</option>
            <option disabled value="pc">Point Count</option>
            <option disabled value="da">Habitat Data</option>
        </select>
        <script type="text/javascript"> 
    $("#taxa").chosen().change(function(){


            var val = $(this).val();
                if(val == "he" || val == "la"){
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:upadted");
                    $('#survey option[value="tr"]'),attr('disabled', false).trigger("liszt:upadted");
                    } else if(val == "ba"){
                    $('#survey option[value="mn"]').attr('disabled', false).trigger("liszt:updated");
                    }else if(val == "ha"){
                    $('#survey option[value="da"]').attr('disabled', false).trigger("liszt:updated");
                    } else if(val == "bi"){
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="mn"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="pc"]').attr('disabled', false).trigger("liszt:updated");
                    }else{
                    }
        });

The above is sort of working but doesn't recognise changes in the #taxa selection.

回答1:

Okay, finally cracked it. The code is not pretty nor elegant but it works:

        <select data-placeholder="Choose a area of interest..." name="taxa" id="taxa" class="chzn-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <option value="he">Herps</option>
            <option value="ba">Bats</option>
            <option value="bi">Birds</option>
            <option value="la">Large Mammals</option>
            <option value="ha">Habitat</option>
        </select>
        <br />
        <br />

        <select data-placeholder="Choose a survey..." name="survey" id="survey" class="chzn-select" style="width:350px;" tabindex="3">
            <option value=""></option>
            <option value="op">Opportunistic</option>
            <option value="tr">Transect</option>
            <option value="mn">Mist Netting</option>
            <option value="pc">Point Count</option>
            <option value="da">Habitat Data</option>
        </select>


        $("#taxa").chosen().change(function(){


            var val = $(this).val();
                $('#survey option').attr('disabled', true).trigger("liszt:upadted");
                if(val == "he"){
                    $('#survey option[value="tr"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:updated");
                    }else if(val == "la"){
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:upadted");
                    $('#survey option[value="tr"]').attr('disabled', false).trigger("liszt:upadted");                       
                    } else if(val == "ba"){
                    $('#survey option[value="mn"]').attr('disabled', false).trigger("liszt:updated");
                    }else if(val == "ha"){
                    $('#survey option[value="da"]').attr('disabled', false).trigger("liszt:updated");
                    } else if(val == "bi"){
                    $('#survey option[value="op"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="mn"]').attr('disabled', false).trigger("liszt:updated");
                    $('#survey option[value="pc"]').attr('disabled', false).trigger("liszt:updated");
                    }else{
                    }

        });

回答2:

I believe idea is import so I just put how to implement this thing here.

Front end, you have a parent-sel and a child-sel, indicating the parent-select and child-select, respectively
When you generate this HTML, you need to pass the ParentOption - ChildOptions information, perferably as a json array in a script tag, something like this:
{info:"here's your json"}
On the JS end, parse that JSON array and store internally. add an onChange listener to the parent-sel, this listener would:
1. read the selected value, thus get corresponding child-sel array info
2. make child-sel's html to be empty
3. create the option element using jQuery, and add these elements into the Child Select.

Then done ;)

来源：https://stackoverflow.com/questions/17635792/how-do-i-update-one-dropdown-according-to-values-selected-in-another

标签

php

javascript

jquery-chosen