Jak wypełniłbym wybrany rozwijany, którego wartości są zależne od wybranego w drodze nadrzędnej. E-G, pierwsze rozwijanie ma w nim nazwy krajów, a na wyborze następnego rozwijania obciąży odpowiednie stany tego kraju, wybranego w pierwszej drodze rozwijanej. A potem Powiedz, że mam trzecią rozwijaną, gdzie umieszczam wizerunek tego konkretnego stanu, odpowiada to, co jest wybierane w drugiej drodze rozwijanej.

Jak można to zrobić w jQuery.

Na przykład

Kraj >>>>> Stany >>>>>> Mapa tego stanu

0
Mike 18 październik 2011, 23:42

2 odpowiedzi

Najlepsza odpowiedź

Spójrz na tę wtyczkę: Cascade Możesz mieć kilka klas CSS dla każdego stanu te flagą, którą chcesz pokazać z odpowiednim obrazem tła i klasą Swith na drugiej drapieżnej zmianie zdarzenia:

var statesList = [
    {
    'When': 'US',
    'Value': 'nope',
    'Text': 'Select state'},
{
    'When': 'US',
    'Value': 'US_AL',
    'Text': 'Alabama'},

{
    'When': 'US',
    'Value': 'US_AK',
    'Text': 'Alaska'},
{
    'When': 'IN',
    'Value': 'nope',
    'Text': 'Select state'},
{
    'When': 'IN',
    'Value': 'IN_AP',
    'Text': 'Andra Pradesh'},

{
    'When': 'IN',
    'Value': 'IN_AS',
    'Text': 'Assam'}
];

$("#state").cascade("#country", {
    list: statesList,
    template: function(item) {
        return "<option value='" + item.Value + "'>" + item.Text + "</option>";
    },
    match: function(selectedValue) {
        return this.When == selectedValue;
    }
});

$("#state").change(function() {
    $("#flag").removeClass().addClass($(this).val());
});

<label>Country
    <select id="country">
        <option value="nope">Choose a country</option>
        <option value="US">United States</option>
        <option value="IN">India</option>
    </select>
</label>

<label>State
    <select id="state">
        <option value='nope'>Select a country before</option>
    </select>
</label>

<span id="flag" style="border: 1px solid #000; padding: 1px;">
</span>
0
Yuriy Rozhovetskiy 18 październik 2011, 20:39