所以我目前正在处理按州组织的商店列表。而不是只将它们全部列在页面上,我想使用一个选择框,您显然选择了一个状态,然后处于该状态的商店异步显示而无需点击提交按钮......我觉得我知道它背后的理论,我只是在寻找一个很好的例子/教程来工作
谢谢你的帮助
skv
所以我目前正在处理按州组织的商店列表。而不是只将它们全部列在页面上,我想使用一个选择框,您显然选择了一个状态,然后处于该状态的商店异步显示而无需点击提交按钮......我觉得我知道它背后的理论,我只是在寻找一个很好的例子/教程来工作
谢谢你的帮助
skv
我会为您的商店创建您选择的状态框和选择容器;
<select id="state">
<option value="">Select State</option>
<option value="AL">Alabama</option>
...
</select>
<select id="stores"></select>
然后在jquery中设置一个change事件来监听你的状态选择框来改变
$('#state').change(function(){
if($(this).val()==''){
$('#stores').html('<option value=""></option>');
return;
}
$.ajax({
type:"POST",
url:"PATH_TO_PHP",
data:"state="+$(this).val(),
success:function(x){
$('#stores').html(x);
}
});
});
然后在您的 php 端检索状态,找到商店并返回选项
$state = $_POST['state'];
// $stores = SQL QUERY TO GET STORES
echo '<option value="">Choose a Store</option>';
foreach($stores as $s){
echo '<option value="'.$s.'">'.$s.'</option>';
}
您可以尝试搜索 ajax php 下拉教程,作为快速指导,您需要做的就是使用选定状态向您的服务器运行 ajax 请求,并在下一个下拉列表中填写商店名称,我将粘贴示例代码在这里,但您仍然需要根据您的需要对其进行修改。
HTML 结构
<select name="state" id="state">
<option value="State1"> State 1 </option>
<option value="State2"> State 2 </option>
<option value="State3"> State 3 </option>
</select>
<div id="store_dropdown">
</div>
jQuery Ajax 请求
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function getStores(){
data = 'state=' + $('#state').val();
$.post('getStores.php',data,function(response){
$('#store_dropdown').val(response);
})
}
$('#state').keyup(getStores);
$('#state').keydown(getStores);
$('#state').mouseup(getStores);
$('#state').mousedown(getStores);
})
</script>
php代码
$state = $_POST['state'];
// here goes your sql query to the database
// run a while loop with the fetched data
$output = '<select name="store_name">';
while($row = mysql_fetch_array($sql))
{
$output .= '<option value="'.$row['store_name'].'">'.$row['state_name'].'</option>';
}
$output .= '</select>';
echo $output;