如何使用jquery mobile构建一个级联下拉列表？

Question

我有一个表单，我将在应用程序中使用两个级联下拉列表和几个文本框。

我想使用jquery移动库。

如何构建级联下拉列表？因为如果您使用jquery mobile，它会用带有ul、li和很多div的选项覆盖dropdowlist。

在jquery mobile framework中有没有使用级联下拉列表的替代方案？

Answer 1

像这样的东西可以工作吗？现场示例：

• http://jsfiddle.net/rA9gU/45/

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <form name="test">
            <select name="state_select" id="state_select">
                <option value="">Select a state</option>
            </select>

            <select name="city_select" id="city_select">
                <option value="">Select a City</option>
            </select>

            <select name="theater_select" id="theater_select">
                <option value="">Select a Theater</option>
            </select>

        </form>

    </div>
</div>

JS

// Add State Options
for (i = 0; i <= 50; i++) {
    $('#state_select').append('<option value="state' + i + '">State ' + i + '</option>');
    $('#state_select_show').append('<option value="state' + i + '">State ' + i + '</option>');
}

addCites();
addTheaters();

$("#city_select").parent().parent().hide();
$("#theater_select").parent().parent().hide();

function addCites() {
    ii = 0;

    for (i = 0; i <= 500; i++) {
        if ((i % 10) == 0) {
            ii++;
        }
        $('#city_select').append('<option value="city' + i + '" id="state' + ii + '">City ' + i + '</option>');
        $('#city_select_show').append('<option value="city' + i + '" id="state' + ii + '">City ' + i + '</option>');
    }
}

function addTheaters() {
    ii = 0;

    for (i = 0; i <= 1000; i++) {
        if ((i % 10) == 0) {
            ii++;
        }
        $('#theater_select').append('<option value="theater' + i + '" id="city' + ii + '">Theater ' + i + '</option>');
        $('#theater_select_show').append('<option value="theater' + i + '" id="city' + ii + '">Theater ' + i + '</option>');
    }
}

$('#state_select').change(function() {
    var selectedState = $(this).val();
    var selectFirst = 0;
    addCites();

    $("#city_select option").each(function() {
        if ($(this).attr('id') != selectedState) {
            $(this).remove();
        } else {
            if (selectFirst < 1) {
                $(this).attr('id', selectedState).attr('selected', 'selected');
            }
            selectFirst++;
        }
    });
    $("#city_select").parent().parent().show();

    if ($('#city_select option').size() == 0) {
        $('#city_select').append('<option value="nocity">No City Found</option>');
    }
});

$('#city_select').change(function() {
    var selectedCity = $(this).val();
    var selectFirst = 0;
    addTheaters();

    $("#theater_select option").each(function() {
        if ($(this).attr('id') != selectedCity) {
            $(this).remove();
        } else {
            if (selectFirst < 1) {
                $(this).attr('id', selectedCity).attr('selected', 'selected');
            }
            selectFirst++;
        }
    });
    $("#theater_select").parent().parent().show();

    if ($('#theater_select option').size() == 0) {
        $('#theater_select').append('<option value="notheater">No Theater Found Near You</option>');
    }
});

Answer 2

灯丝组有一个灵活的下拉/下拉菜单：http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

特别是"iPod Style“菜单在移动设备上工作得很好。