У меня есть страница 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 (), который должен очистить прикованный блок выбора и добавить новые параметры, но я очень новичок в веб-языках, и я не могу ничего работать. Ниже моя попытка, но я думаю, что я не могу легко ссылаться на js и php. Примечание. Я знаю, что этот фрагмент действительно плохой и содержит ошибки. Мои мысли заключались в том, чтобы иметь функцию скрипта, которая выполняет следующие действия:
Это было бы фантастически, если это возможно. Любые другие методы тоже будут хороши, но я попытался использовать методы 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>
$ ('# 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();
Другой вариант – использовать веб-службу для этой функции. Это сэкономит массу времени. http://geodata.solutions позволяет вам просто скопировать немного кода в вашу форму, и он просто работает. Вы можете настроить различные параметры вывода и сделать такие вещи, как предварительно выбрать страну пользователя. Гораздо проще, чем делать все кодирование самостоятельно (если вы этого не хотите)
<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&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>