Question

我正在尝试创建一个包含多个下拉列表的表单，以便在世界中选择位置。

<div class="form-group control-group">
                    <label for="text" class="col-sm-2 control-label">Country</label>
                    <div class="col-sm-8">
                        <select class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>

                <div class="form-group control-group">
                    <label for="text" class="col-sm-2 control-label">State/Province</label>
                    <div class="col-sm-8">
                        <select class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>

                <div class="form-group control-group">
                    <label for="text" class="col-sm-2 control-label">City</label>
                    <div class="col-sm-8">
                        <select class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>

                <div class="form-group control-group">
                    <label for="text" class="col-sm-2 control-label">Postal Code</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="subject" name="subject">
                    </div>
                </div>

如果未选择国家/地区，则仅显示国家/地区列表;如果选择国家/地区，则仅显示国家和州/省列表...依此类推。该列表将存储在SQL中。

感谢任何帮助。感谢。

Answer 1

<select id="country" class="form-control" onchange="javascript:countryChange();">
    <option>1</option>
    <option>2</option>
</select>

<select id="state" class="form-control" onchange="javascript:stateChange();">
</select>

<select id="city" class="form-control"></select>

<script>
function countryChange() {
    var selected = jQuery("#country option:selected").text();

    jQuery.ajax({
        url: "country2states.php?country="+selected
    }).done(function(msg) {
        jQuery("#state").html('');
        jQuery("#city").html('');
        jQuery("#state").html(msg);
    });
}

function stateChange() {
    var selected = jQuery("#state option:selected").text();

    jQuery.ajax({
        url: "state2cities.php?state="+selected
    }).done(function(msg) {
        jQuery("#city").html('');
        jQuery("#city").html(msg);
    });
}
</script>

要使第一个功能起作用，您必须创建一个PHP页面（country2states.php）来处理数据库查询以检索所选国家/地区的状态列表

"SELECT statename FROM states WHERE country='" . $_GET['country'] . "';"

并返回ECHOing一个格式如下的字符串：

"<option>Iowa</option><option>South Dakota</option><option>Texas</option>....."

第二个函数的相同内容，你将创建state2cities.php，你知道其余的。：）

PHP选择下拉菜单

1 个答案: