2011-02-02 97 views
0

以下是问题:我有一个国家和国家的JS下拉菜单运行在PHP表单中供用户更新他们的配置文件。帮助使用JS下拉列表为国家/国家与PHP

用户选择国家为前'美国',然后州'科罗拉多',并提交。会发生什么情况是这些值在我的数据库中保存成功,但是当页面刷新时,只有用户选择的国家/地区下拉菜单才会被选中。状态显示为“选择状态”,尽管值“科罗拉多”在数据库中。

我只是不能设法让PHP和JS互相对话,这样如果用户选择科罗拉多州,它应该从数据库中拉出来,并在刷新或返回页面时显示为选定的。

任何想法如何做到这一点?我试着在JS代码顶部的建议,但没有成功。

这里是JS(一些代码修整为简洁起见):

// If you have PHP you can set the post values like this 
//var postState = '<?= $_POST["state"] ?>'; 
//var postCountry = '<?= $_POST["country"] ?>'; 
var postState = ''; 
var postCountry = ''; 

// To edit the list, just delete a line or add a line. Order is important. 
// The order displayed here is the order it appears on the drop down. 
// 
var state = '\ 
US:Alaska:Alaska|\ 
US:Alabama:Alabama|\ 
'; 

var country = '\ 
US:United States|\ 
CA:Canada|\ 
'; 

function TrimString(sInString) { 
    if (sInString) { 
    sInString = sInString.replace(/^\s+/g, "");// strip leading 
    return sInString.replace(/\s+$/g, "");// strip trailing 
    } 
} 

// Populates the country selected with the counties from the country list 
function populateCountry(defaultCountry) { 
    if (postCountry != '') { 
    defaultCountry = postCountry; 
    } 
    var countryLineArray = country.split('|'); // Split into lines 
    var selObj = document.getElementById('countrySelect'); 
    selObj.options[0] = new Option('Select Country',''); 
    selObj.selectedIndex = 0; 
    for (var loop = 0; loop < countryLineArray.length; loop++) { 
    lineArray = countryLineArray[loop].split(':'); 
    countryCode = TrimString(lineArray[0]); 
    countryName = TrimString(lineArray[1]); 
    if (countryCode != '') { 
     selObj.options[loop + 1] = new Option(countryName, countryCode); 
    } 
    if (defaultCountry == countryCode) { 
     selObj.selectedIndex = loop + 1; 
    } 
    } 
} 

function populateState() { 

    var selObj = document.getElementById('stateSelect'); 
    var foundState = false; 
    // Empty options just in case new drop down is shorter 
    if (selObj.type == 'select-one') { 
    for (var i = 0; i < selObj.options.length; i++) { 
     selObj.options[i] = null; 
    } 
    selObj.options.length=null; 
    selObj.options[0] = new Option('Select State',''); 
    selObj.selectedIndex = 0; 
    } 
    // Populate the drop down with states from the selected country 
    var stateLineArray = state.split("|"); // Split into lines 
    var optionCntr = 1; 
    for (var loop = 0; loop < stateLineArray.length; loop++) { 
    lineArray = stateLineArray[loop].split(":"); 
    countryCode = TrimString(lineArray[0]); 
    stateCode = TrimString(lineArray[1]); 
    stateName = TrimString(lineArray[2]); 
    if (document.getElementById('countrySelect').value == countryCode && countryCode != '') { 
    // If it's a input element, change it to a select 
     if (selObj.type == 'text') { 
     parentObj = document.getElementById('stateSelect').parentNode; 
     parentObj.removeChild(selObj); 
     var inputSel = document.createElement("SELECT"); 
     inputSel.setAttribute("name","state"); 
     inputSel.setAttribute("id","stateSelect"); 
     parentObj.appendChild(inputSel) ; 
     selObj = document.getElementById('stateSelect'); 
     selObj.options[0] = new Option('Select State',''); 
     selObj.selectedIndex = 0; 
     } 
     if (stateCode != '') { 
     selObj.options[optionCntr] = new Option(stateName, stateCode); 
     } 
     // See if it's selected from a previous post 
     if (stateCode == postState && countryCode == postCountry) { 
     selObj.selectedIndex = optionCntr; 
     } 
     foundState = true; 
     optionCntr++ 
    } 
    } 
    // If the country has no states, change the select to a text box 
    if (! foundState) { 
    parentObj = document.getElementById('stateSelect').parentNode; 
    parentObj.removeChild(selObj); 
    // Create the Input Field 
    var inputEl = document.createElement("INPUT"); 
    inputEl.setAttribute("id", "stateSelect"); 
    inputEl.setAttribute("type", "text"); 
    inputEl.setAttribute("name", "state"); 
    inputEl.setAttribute("size", 30); 
    inputEl.setAttribute("value", postState); 
    parentObj.appendChild(inputEl) ; 
    } 
} 

function initCountry(country) { 
    populateCountry(country); 
    populateState(); 
} 

这里是PHP/HTML(修剪了一下):

<?php 
include 'dbc.php'; 
page_protect(); 

$err = array(); 
$msg = array(); 

if ($_POST['doUpdate'] == 'Update') { 

    foreach ($_POST as $key => $value) { 
     $data[$key] = filter($value); 
    } 

    $country =   $data['country']; 
    $state =   $data['state']; 

    mysql_query("UPDATE users SET 
    `country` =   '$data[country]', 
    `state` =   '$data[state]' 

    WHERE id='$_SESSION[user_id]' 
    ") or die(mysql_error()); 

    $msg[] = "Your Profile has been updated"; 
    //header("Location: mysettings.php?msg=Your new password is updated"); 

} 

$rs_settings = mysql_query("select * from users where id='$_SESSION[user_id]'"); 
?> 

<html> 
<body> 
    <form name="profile_form" id="profile_form" method="post" action=""> 
     <?php while ($row_settings = mysql_fetch_array($rs_settings)) {?> 
     <input name="doUpdate" type="submit" id="doUpdate" value="Update"> 

     <table> 
      <tr> 
       <th>Country:</th> 

       <td><select id='countrySelect' name='country' onchange='populateState()'> 
        </select></td> 
      </tr> 

      <tr> 
       <th>State:</th> 

       <td> 
        <select id='stateSelect' name='state'> 
        </select> 
         <script type="text/javascript"> 
          initCountry('<?php echo $row_settings['country']; ?>'); 
        </script> 
       </td> 
      </tr> 
     </table> 
    </form> 
</body> 
</html> 

回答

0

一个我经常遇到的问题用Javascript加载是加载顺序。

您似乎正在运行并同时调用populateCountry和populateState,因此一旦确定了国家/地区列表,就没有太多机会填充州列表。

考虑将“populateState()”移动到“populateCountry()”的最后一行,以便在函数处理结束时调用它。

有多种方法可以做到这一点,但这是最简单的例子。

+0

你的意思是移动populateState()?对不起,但我不明白你认为应该去哪里 – pepe 2011-02-02 05:20:41

+0

是的,对不起。天色已晚。我用正确的函数名称编辑了我的回复。在完成populateCountry函数之后,将populateState放置在右括号之前,以便在给定代码的情况下按顺序运行。 – jerebear 2011-02-02 15:43:43

0

更改顶部线条

// If you have PHP you can set the post values like this 
//var postState = '<?php echo $_POST["state"] ?>'; 
//var postCountry = '<?php echo $_POST["country"] ?>'; 
var postState = ''; 
var postCountry = ''; 

// If you have PHP you can set the post values like this 
var postState = '<?= $_POST["state"] ?>'; 
var postCountry = '<?= $_POST["country"] ?>'; 
//var postState = ''; 
//var postCountry = ''; 

这是否不行?

PHP短标签,即“<?=”不是默认启用了,我相信在一些较新的PHP版本。我已经停止使用它了,我知道它看起来很漂亮,但如果你迁移到不支持它们的服务器,这可能会很痛苦。