logo标签列表

级联选择框（国家、省/州、城市）

javascriptphpjquerysqlajax
3
我有一个 PHP 页面，想要从国家、州和城市列表中选择位置。该页面包含用户注册的其他数据（名称、电子邮件等），因此我不希望在选择框刷新时刷新页面或任何内容。目前，每个选择框都只加载完整的国家、州或城市列表。我希望它们被链接起来，这样就不会出现重复的城市名称（在不同的州或国家中具有相同的名称）。
位置存储在数据库中，并在页面加载时传递给页面。然后循环遍历并添加到选择框中:
<tr>
    <label>Select State: </label>
    <select name="state" id="state_select" style="width:200px;">
        <option value="">Select a State or Province</option>
        <?php while($state = $states->fetchObject()) { ?>
             <option value="<?php echo $state->id; ?>"><?php echo $state->title; ?></option>
        <?php } ?>
    </select>
</tr>

数据库结构非常简单：

Country : | id | title |
State : | id | title | country_id |
City : | id | title | state_id |

我可以想到在.onChange()语句中编写的逻辑，它应该清除级联选择框并添加新选项，但我对基于Web的语言非常陌生，我无法使任何内容正常工作。以下是我的尝试，但我猜我不能轻松地在js和php之间引用。注意：我知道这段代码真的很糟糕，包含错误。我的想法是有一个脚本函数可以执行以下操作：
  1. 清空州/省选择框中的所有选项（假设您已更改了国家选择）
  2. 循环遍历提供的状态列表（由控制器传递的SQL查询）
  3. 为每个具有与所选国家ID匹配的'country_id'的条目在州/省选择框中放置一个选择选项
^ 如果可能的话，这将是很棒的。任何其他方法也可以，但我已经尝试使用ajax和JSON方法，但我实在不理解。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<script>
    $( document ).ready(function() {
        $('#country_select').change(function(){
            $('#state_select').empty();
            //for each state
            <?php while($state = $states->fetchObject()) {
                $temp = $('#country_select').val()); 
                //if country matches selected country 
                if($state->country_id == $temp){
                    // create an option ?>
                    var option = '<option value="">Test</option>';
                <?php// } 
                //then append that option?>
                 <?php// } ?>
             $('#state_select').append(option);
           });
        });
    </script>
你在遇到什么问题？ - M.chaudhry
建议查看众多教程和/或jQuery插件来解决此问题。 - charlietfl
请看这个例子 http://jdrop.no81no.com/html/examples/dropdowns/json-server.html - ka_lin
刚刚看到了这个！谢谢你！ - user3005504
为什么你有三个表？既然它们具有相同的结构，你应该只有一个；id（整数），位置（字符串），父级（整数）。 - hex494D49
显示剩余3条评论
2个回答
8

$('#mobile_phone_network option:selected').val()我没有测试过，但应该可以工作。它很简单，会给你一些想法。

**HTML**
<div id="countryWrap"><select id="country" name="country"></select></div>
<div id="stateWrap"><select id="state" name="state"></select></div>
<div id="cityWrap"><select id="city" name="city"></select></div>

<script>
$(document).ready(function(){
  $('#country').change(function(){
    loadState($(this).find(':selected').val())
  })
  $('#state').change(function(){
    loadCity($(this).find(':selected').val())
  })


})

function loadCountry(){
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=country"
            }).done(function( result ) {
                $(result).each(function(){
                    $("#country").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}
function loadState(countryId){
        $("#state").children().remove()
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=state&countryId=" + countryId
            }).done(function( result ) {
                $(result).each(function(){
                    $("#state").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}
function loadCity(stateId){
        $("#city").children().remove()
        $.ajax({
            type: "POST",
            url: "ajax/ajax.php",
            data: "get=city&stateId=" + stateId
            }).done(function( result ) {
                $(result).each(function(){
                    $("#city").append($('<option>', {
                        value: this.id,
                        text: this.name,
                    }));
                })
            });
}

// init the countries
loadCountry();
</script>




**ajax.php** 

$countryId = isset($_POST['countryId'])  ? $_POST['countryId'] : 0;
$stateId = isset($_POST['stateId'])  ? $_POST['stateId'] : 0;
$command = isset($_POST['get'])  ? $_POST['get'] : "";

switch($command){
case "country":
$statement = "SELECT id, name FROM country";
break;
case "state":
$statement = "SELECT id, name FROM state WHERE country_id=".(int)countryId;
break;
case "city":
$statement = "SELECT id, name FROM country WHERE state_id=".(int)stateId;
break;
default:
break;
}

$sth = $dbh->prepare($statement);
$sth->execute();
$result = $sth->fetchAll();

echo json_encode($result);
exit();
原来是我的同事在使用一个脚本，导致我的元素出了问题，所以我设法找到了解决方法。除此之外，这个答案还是很好的。谢谢！ - user3005504
-3
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
           <!-- ****************For State Loads Starts***************************-->
           $("#field6").change(function (e){
           var state = 
           {
           '0': ['Not Available'],
           'Z1':['Australian Capital Territory','New South Wales',
           'Northern Territory','Queensland','South Australia',
           'Tasmania','Victoria','Western Australia'],
           'IN':['Delhi','Maharashtra','TamilNadu','Karnataka','Haryana',
           'Uttar Pradesh','Andhra Pradesh','Jammu and Kashmir',
           'West Bengal','Gujarat','Madhya Pradesh','Kerala',
           'Punjab','Bihar','Rajasthan','Orissa','Assam','NA',
           'Himachal Pradesh','Chhattisgarh'],
           'MY':['Johor','Kedah','Kelantan','Kuala Lumpur','Labuan','Melaka',
           'Negeri Sembilan','Pahang','Penang','Perak','Perlis','Sabah',
           'Sarawak','Selangor','Terengganu'],
           'CN':['Beijing','Anhui','Chongqing','Fujian','Gansu','Guangdong',
           'Guangxi','Guizhou','Hainan','Hebei','Heilongjiang','Henan',
           'Hubei','Hunan','Jiangsu','Jiangxi','Jilin','Liaoning','Nei',
           'Mongol','Ningxia','Qinghai','Shaanxi','Shandong',
           'Shanghai','Shanxi','Sichuan','Tianjin',
           'Xinjiang','Xizang','(Tibet)','Yunnan','Zhejiang']
           }    
           var value = this.value;
           // Access the object like city['CT'] .. That gives the Array
           state[value] !== undefined ? state[value] : '0';                                 
           var stateOptions = state[value];         
           var $field8 = $('#field8'),
           $field9 = $('#field9');  
           $field8.html(''); // clear the existing options  
           $field9.html(''); // clear the existing options                
           $.each(stateOptions, function (i, o) {
           $('<option>' + o + '</option>').appendTo('#field8');
           });// ------------>each end tag          
           });//----------------->on-change end tag
           <!-- ****************For State Loads Ended***************************-->
           <!-- ****************For City Loads Starts***************************-->
           $("#field8").change(function (e){     
           var city = 
           {
           '0': ['Not Available'],
           'TamilNadu' : ['Coimbatore','Mettupalyam','Karur','Pollachi'],
           'Karnataka' : ['Bangalore','Mysore','Bellary','Mandya','Chikmagalur'
           ,'Chamarajanagar','Udupi','Chikkaballapura'],
           'Delhi'     : ['Faridabad','Panchkula','Sonipat','Hisar','Palwal','Thanesar']         
           }
           var value = this.value;
           city[value] !== undefined ? city[value] : '0';
           var cityOptions = city[value];
           var $field9 = $('#field9');              
           $field9.html(''); // clear the existing options 
           $.each(cityOptions, function (j, k) {
           $('<option>' + k + '</option>').appendTo('#field9');
           });// ------------>each end tag
           });//----------------->on-change end tag
           <!-- ****************For City Loads Ended***************************-->
           }); //-------------------->ready end tag
           </script>


           HTML Tag :

           <div id="formElement6" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
           <div class="field-wrapper" style="float: left; width: 100%; clear: both" >
           <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
           <p style="position: relative; margin: 0px; padding: 0px" >
           <label for="Country" style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >Country</label>
           <select id="field6" name="Country" style="width: 100%" >
           <option value="" selected="selected" >--Please Select--</option>
           <option value="YE" >Yemen</option>
           <option value="YT" >Mayotte</option>
           <option value="Z1" >Austria-SEAD</option>
           <option value="ZA" >South Africa</option>
           <option value="ZM" >Zambia</option>
           <option value="ZW" >Zimbabwe</option>
           <option value="ZY" >Taiwan(CO Only)</option>
           <option value="ZZ" >Others</option>
           <option value="AM" >Armenia</option>
           <option value="GB" >United Kingdom</option>
           <option value="SI" >Slovenia</option>
           <option value="LS" >Lesotho</option>
           <option value="MC" >Monaco</option>
           <option value="CU" >Cuba</option>
           <option value="SL" >Sierra Leone</option>
           <option value="FO" >Faroe Islands</option>
           <option value="GQ" >Equatorial Guin</option>
           <option value="IN" >India</option>
           <option value="KY" >Cayman Islands</option>
           <option value="ME" >Montenegro</option>
           <option value="MN" >Mongolia</option>
           <option value="AF" >Afghanistan</option>
           <option value="AZ" >Azerbaijan</option>
           <option value="BS" >Bahamas</option>
           <option value="CK" >Cook Islands</option>
           <option value="EC" >Ecuador</option>
           <option value="MY" >Malaysia</option>
           <option value="NZ" >New Zealand</option>
           <option value="QA" >Qatar</option>
           <option value="SJ" >Svalbard</option>
           <option value="IR" >Iran</option>
           <option value="KI" >Kiribati</option>
           <option value="LC" >St. Lucia</option>
           <option value="MD" >Moldova</option>
           <option value="BI" >Burundi</option>
           <option value="BW" >Botswana</option>
           <option value="CH" >Switzerland</option>
           <option value="CY" >Cyprus</option>
           <option value="PE" >Peru</option>
           <option value="PS" >Palestine</option>
           <option value="SA" >Saudi Arabia</option>
           <option value="SO" >Somalia</option>
           <option value="GY" >Guyana</option>
           <option value="KR" >South Korea</option>
           <option value="AO" >Angola</option>
           <option value="BZ" >Belize</option>
           <option value="MX" >Mexico</option>
           <option value="RU" >Russian Fed.</option>
           <option value="MR" >Mauretania</option>
           <option value="SH" >Saint Helena</option>
           <option value="FJ" >Fiji</option>
           <option value="FK" >Falkland Islnds</option>
           <option value="FM" >Micronesia</option>
           <option value="FR" >France</option>
           <option value="GA" >Gabon</option>
           <option value="GD" >Grenada</option>
           <option value="GE" >Georgia</option>
           <option value="GF" >French Guayana</option>
           <option value="GG" >GUERNSEY</option>
           <option value="GH" >Ghana</option>
           <option value="GI" >Gibraltar</option>
           <option value="GL" >Greenland</option>
           <option value="GM" >Gambia</option>
           <option value="GN" >Guinea</option>
           <option value="GP" >Guadeloupe</option>
           <option value="GR" >Greece</option>
           <option value="GS" >S. Sandwich Ins</option>
           <option value="GT" >Guatemala</option>
           <option value="GU" >Guam</option>
           <option value="GW" >Guinea-Bissau</option>
           <option value="HK" >Hong Kong</option>
           <option value="HM" >Heard/McDon.Isl</option>
           <option value="HN" >Honduras</option>
           <option value="HR" >Croatia</option>
           <option value="HT" >Haiti</option>
           <option value="HU" >Hungary</option>
           <option value="ID" >Indonesia</option>
           <option value="IE" >Ireland</option>
           <option value="IL" >Israel</option>
           <option value="IO" >Brit.Ind.Oc.Ter</option>
           <option value="IQ" >Iraq</option>
           <option value="IS" >Iceland</option>
           <option value="IT" >Italy</option>
           <option value="JE" >JERSEY</option>
           <option value="JM" >Jamaica</option>
           <option value="JO" >Jordan</option>
           <option value="JP" >Japan</option>
           <option value="KE" >Kenya</option>
           <option value="KG" >Kyrgyzstan</option>
           <option value="KH" >Cambodia</option>
           <option value="KM" >Comoros</option>
           <option value="KN" >St Kitts&amp;Nevis</option>
           <option value="KP" >North Korea</option>
           <option value="KW" >Kuwait</option>
           <option value="KZ" >Kazakhstan</option>
           <option value="LA" >Laos</option>
           <option value="LB" >Lebanon</option>
           <option value="LI" >Liechtenstein</option>
           <option value="LK" >Sri Lanka</option>
           <option value="LR" >Liberia</option>
           <option value="LT" >Lithuania</option>
           <option value="LU" >Luxembourg</option>
           <option value="LV" >Latvia</option>
           <option value="LY" >Libya</option>
           <option value="M4" >MIAMI</option>
           <option value="MA" >Morocco</option>
           <option value="MF" >SAINT MARTIN</option>
           <option value="MG" >Madagascar</option>
           <option value="MH" >Marshall Islnds</option>
           <option value="MK" >Macedonia</option>
           <option value="ML" >Mali</option>
           <option value="MM" >Myanmar</option>
           <option value="MO" >Macau</option>
           <option value="MP" >N.Mariana Islnd</option>
           <option value="MQ" >Martinique</option>
           <option value="MS" >Montserrat</option>
           <option value="MT" >Malta</option>
           <option value="AD" >Andorra</option>
           <option value="AE" >Utd.Arab Emir.</option>
           <option value="AG" >Antigua/Barbuda</option>
           <option value="AI" >Anguilla</option>
           <option value="AL" >Albania</option>
           <option value="AN" >Dutch Antilles</option>
           <option value="AQ" >Antarctica</option>
           <option value="AR" >Argentina</option>
           <option value="AS" >Samoa, America</option>
           <option value="AT" >Austria</option>
           <option value="AU" >Australia</option>
           <option value="AW" >Aruba</option>
           <option value="AX" >Åland</option>
           <option value="BA" >Bosnia-Herz.</option>
           <option value="BB" >Barbados</option>
           <option value="BD" >Bangladesh</option>
           <option value="BE" >Belgium</option>
           <option value="BF" >Burkina Faso</option>
           <option value="BG" >Bulgaria</option>
           <option value="BH" >Bahrain</option>
           <option value="BJ" >Benin</option>
           <option value="BL" >Blue</option>
           <option value="BM" >Bermuda</option>
           <option value="BN" >Brunei Daruss.</option>
           <option value="BO" >Bolivia</option>
           <option value="BR" >Brazil</option>
           <option value="BT" >Bhutan</option>
           <option value="BV" >Bouvet Islands</option>
           <option value="BY" >Belarus</option>
           <option value="C2" >Canary Island</option>
           <option value="C3" >CURACAO</option>
           <option value="CA" >Canada</option>
           <option value="CC" >Coconut Islands</option>
           <option value="CD" >Dem. Rep. Congo</option>
           <option value="CF" >CAR</option>
           <option value="CG" >Rep.of Congo</option>
           <option value="CI" >Cote d'Ivoire</option>
           <option value="CL" >Chile</option>
           <option value="CM" >Cameroon</option>
           <option value="CN" >China</option>
           <option value="CO" >Colombia</option>
           <option value="CR" >Costa Rica</option>
           <option value="CS" >Serbia/Monten.</option>
           <option value="CV" >Cape Verde</option>
           <option value="CX" >Christmas Islnd</option>
           <option value="CZ" >Czech Republic</option>
           <option value="DE" >Germany</option>
           <option value="DJ" >Djibouti</option>
           <option value="DK" >Denmark</option>
           <option value="DM" >Dominica</option>
           <option value="DO" >Dominican Rep.</option>
           <option value="DZ" >Algeria</option>
           <option value="EE" >Estonia</option>
           <option value="EG" >Egypt</option>
           <option value="EH" >West Sahara</option>
           <option value="ER" >Eritrea</option>
           <option value="ES" >Spain</option>
           <option value="ET" >Ethiopia</option>
           <option value="EU" >European Union</option>
           <option value="FI" >Finland</option>
           <option value="MU" >Mauritius</option>
           <option value="MV" >Maldives</option>
           <option value="MW" >Malawi</option>
           <option value="MZ" >Mozambique</option>
           <option value="NA" >Namibia</option>
           <option value="NC" >New Caledonia</option>
           <option value="NE" >Niger</option>
           <option value="NF" >Norfolk Islands</option>
           <option value="NG" >Nigeria</option>
           <option value="NI" >Nicaragua</option>
           <option value="NL" >Netherlands</option>
           <option value="NO" >Norway</option>
           <option value="NP" >Nepal</option>
           <option value="NR" >Nauru</option>
           <option value="NT" >NATO</option>
           <option value="NU" >Niue</option>
           <option value="OM" >Oman</option>
           <option value="OR" >Orange</option>
           <option value="PA" >Panama</option>
           <option value="PF" >Frenc.Polynesia</option>
           <option value="PG" >Pap. New Guinea</option>
           <option value="PH" >Philippines</option>
           <option value="PK" >Pakistan</option>
           <option value="PL" >Poland</option>
           <option value="PM" >St.Pier,Miquel.</option>
           <option value="PN" >Pitcairn Islnds</option>
           <option value="PR" >Puerto Rico</option>
           <option value="PT" >Portugal</option>
           <option value="PW" >Palau</option>
           <option value="PY" >Paraguay</option>
           <option value="RE" >Reunion</option>
           <option value="RO" >Romania</option>
           <option value="RS" >Serbia</option>
           <option value="RW" >Rwanda</option>
           <option value="S1" >SAIPAN</option>
           <option value="SB" >Solomon Islands</option>
           <option value="SC" >Seychelles</option>
           <option value="SD" >Sudan</option>
           <option value="SE" >Sweden</option>
           <option value="SG" >Singapore</option>
           <option value="SK" >Slovakia</option>
           <option value="SM" >San Marino</option>
           <option value="SN" >Senegal</option>
           <option value="SR" >Suriname</option>
           <option value="SS" >South Sudan</option>
           <option value="ST" >S.Tome,Principe</option>
           <option value="SV" >El Salvador</option>
           <option value="SY" >Syria</option>
           <option value="SZ" >Swaziland</option>
           <option value="T1" >TAHITI</option>
           <option value="TC" >Turksh Caicosin</option>
           <option value="TD" >Chad</option>
           <option value="TF" >French S.Territ</option>
           <option value="TG" >Togo</option>
           <option value="TH" >Thailand</option>
           <option value="TJ" >Tajikistan</option>
           <option value="TK" >Tokelau Islands</option>
           <option value="TL" >East Timor</option>
           <option value="TM" >Turkmenistan</option>
           <option value="TN" >Tunisia</option>
           <option value="TO" >Tonga</option>
           <option value="TP" >East Timor</option>
           <option value="TR" >Turkey</option>
           <option value="TT" >Trinidad,Tobago</option>
           <option value="TV" >Tuvalu</option>
           <option value="TW" >Taiwan</option>
           <option value="TZ" >Tanzania</option>
           <option value="UA" >Ukraine</option>
           <option value="UG" >Uganda</option>
           <option value="UM" >Minor Outl.Isl.</option>
           <option value="UN" >United Nations</option>
           <option value="US" >USA</option>
           <option value="UY" >Uruguay</option>
           <option value="UZ" >Uzbekistan</option>
           <option value="VA" >Vatican City</option>
           <option value="VC" >St. Vincent</option>
           <option value="VE" >Venezuela</option>
           <option value="VG" >Brit.Virgin Is.</option>
           <option value="VI" >Amer.Virgin Is.</option>
           <option value="VN" >Vietnam</option>
           <option value="VU" >Vanuatu</option>
           <option value="WF" >Wallis,Futuna</option>
           <option value="WS" >Samoa</option>
           <option value="XK" >Kosovo</option>
           </select>
           </p>
           </div>
           </div>
           </div>
           <div id="formElement7" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px" >
           <div class="field-wrapper" style="float: left; width: 100%; clear: both" >
           <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
           <p style="position: relative; margin: 0px; padding: 0px" >
           <input id="field7" type="hidden" name="DataSource" value=""  />
           </p>
           </div>
           </div>
           </div>
           <div id="formElement8" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
           <div class="field-wrapper" style="float: left; width: 100%; clear: both" >
           <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
           <p style="position: relative; margin: 0px; padding: 0px" >
           <label for="state" style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >State</label>
           <select id="field8" name="state" style="width: 100%" >
           <option value="First" >First</option>
           <option value="Second" >Second</option>
           <option value="Third" >Third</option>
           </select>
           </p>
           </div>
           </div>
           </div>
           <div id="formElement9" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
           <div class="field-wrapper" style="float: left; width: 100%; clear: both" >
           <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
           <p style="position: relative; margin: 0px; padding: 0px" >
           <label for="city" style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >City</label>
           <select id="field9" name="city" style="width: 100%" >
           <option value="First" >First</option>
           <option value="Second" >Second</option>
           <option value="Third" >Third</option>
           </select>
           </p>
           </div>
           </div>
           </div>
我把这段代码插入到jsfiddle网站上，但我不知道这段代码应该做什么？你能解释一下吗？ http://jsfiddle.net/fj4y2rpx/ - Monic
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接