2013-03-29 30 views
0

我對PHP和MySQL相當陌生,對jQuery有一點經驗,幾乎沒有JSON經驗,只是爲了給你一些背景。我正在嘗試在我的表單中實現級聯下拉菜單。使用PHP級聯JSON和JSON並使用多個MySQL表使用PHP

我有兩個表:

|city| 
|city_id INT| - PK 
|city VARCHAR (45)| 
|state_state_id INT | - FK 

|state| 
|state_id INT| - PK 
|state VARCHAR (25)| 

這裏是我的形式:

State:<br /> 
<select name="state" id="stateName"> 
<?php foreach($rows as $row): ?> 
<option value="<?php echo htmlentities($row['state'],ENT_QUOTES,'UTF-8');?>"><?php echo htmlentities($row['state'],ENT_QUOTES,'UTF-8');?> 
</option> 
<?php endforeach; ?> 
</select> 
<br /><br /> 
City:<br /> 
<select name="city" id="cityName"></select> 
<input type="submit" name="work_order_submit" id="" value="Add Work Order" /> 

我填充國家下拉與此查詢:

$query = "SELECT * FROM state WHERE 1 ORDER BY state"; 
try{ 
$stmt = $db->prepare($query); 
$stmt->execute(); 
}catch(PDOException $ex){ 
//On production remove getMessage. 
die("Failed to run query: " . $ex->getMessage()); 
} 

$rows = $stmt->fetchAll(); 

這裏的jQuery的我創建運行JSON並在狀態爲選擇狀態時使用狀態下拉列表中的級聯值填充城市下拉列表特德:

<script> 
function populateCityName(){ 
$.getJSON('state-names.php', {stateName:$('#stateName').val()}, 
    function(data){ 
      var select = $('#cityName'); 
      var options = select.prop('options'); 
      $('option', select).remove(); 

      $.each(data, function(index, array){ 
        options[options.length] = new Option(array['city']); 
        }); 

      }); 
} 

$(document).ready(function(){ 
    populateCityName(); 
    $('#stateName').on('change', function(){ 
     populateCityName(); 
    }); 
}); 
</script> 

下面是在國家的names.php文件(我這個代碼之前連接到數據庫)的代碼:當我在表格中選擇狀態

$rows = array(); 
if(isset($_GET['stateName'])){ 
$query = "SELECT city FROM city INNER JOIN state ON city.state_state_id = state.state_id WHERE state = :state ORDER BY city"; 
$query_params = array(":state" => $_GET['stateName']); 
try{ 
    $stmt = $pdo->prepare($query); 
    $stmt->execute($query_params); 
}catch(PDOException $ex){ 
    //On production remove .getMessage. 
    die("Failed to run query: " . $ex->getMessage()); 
} 
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC); 
} 
echo json_encode($rows); 

什麼也沒有發生。我甚至沒有出現錯誤。我測試了SQL,它運行正常,並檢索了我想要的值,但出於某種原因,我無法弄清楚,這些值不會被級聯到City下拉列表中。

任何幫助,非常感謝。

編輯:由於我正在做更多的調試和實現一些東西,這是我迄今爲止發現的。該JSON進來是這樣的:

[{"city":"Salt Lake City"},{"city":"Toole"},{"city":"Provo"},{"city":"St. George"}] 

我現在知道了JSON工作正常。當我將狀態下拉列表中的下拉列表選擇更改爲我知道有城市條目的狀態時,城市下拉列表顯示實際存在條目數量的空白「選項」字段。所以,使用下面的答案和許多關於級聯下拉和鏈接下拉的不同教程,我終於弄明白了。我已經提交了工作代碼的答案。

+0

你有沒有檢查你的控制檯的迴應? –

+0

@Kishor當你說控制檯時,你的意思是哪個控制檯? – Michael

+0

對不起,您的瀏覽器的控制檯。 –

回答

0

你可以嘗試:

$.each(data, function(index, array){ 
    // new Option(text [, value, defaultSelected, selected]); 
    select.add(new Option(array['city'], index), null); 
}); 

+0

我接受你的答案,而不是因爲它直接回答我的問題,而是因爲它迫使我再深入到調試我的代碼。謝謝你的幫助。 – Michael

0

以上所有的代碼工作,除了jQuery功能。那麼,jQuery的工作,我告訴它做的,而不是我真正想要的代碼做...差別很大。

這裏的工作jQuery的用於填充基於狀態下拉菜單作出選擇城市下拉菜單:

<script> 
function populateCityName(){ 
$.getJSON('state-names.php', {stateName: $('#stateName').val()}, 
    function(data){ 
     var html = '<option value="'; 
     var htmlEnd = '</option>'; 
     var options = ''; 
     var select = $('#cityName'); 
     $('option', select).remove(); 
     $.each(data, function(index, array){ 
      options += html + array['city'] + '">' + array['city'] + htmlEnd; 
     }); 
     $('#cityName').append(options); 
    }); 
} 

$(document).ready(function(){ 
    populateCityName(); 
    $('#stateName').on('change', function(){ 
     populateCityName(); 
    }); 
}); 
</script> 

之前,代碼會發現條目的數量和選擇框會顯示該號碼,但選擇是空白的。通過此代碼,可以找到條目的數量,但也顯示這些條目的值。希望以後能幫助別人。