我正在使用语义UI。我有两个下拉列表。首先是国家/地区名称,其次是国家/地区电话代码。我可以在页面加载时显示数据库中的国家/地区名称和国家/地区代码。
现在我从第一个下拉列表中选择国家/地区名称,因此根据国家/地区名称,我必须在第二个列表中显示国家/地区代码,我还需要第二个下拉菜单中的所有国家/地区电话代码。
我尝试使用AJAX但是使用AJAX我得到了正确的国家/地区电话代码,但它没有显示下拉列表。
例如: 如果我选择国家名称"美国"在第二个下拉国家/地区,电话代码将显示" 1"。另外,我需要在下拉列表中剩下所有电话代码。
在页面加载中,我在下拉列表中获取国家/地区名称和国家/地区电话代码。
我选择国名"阿富汗"我得到的国家电话代码是93,这是正确的但这次联系电话下拉不起作用。如何重新选择我的电话代码?
你会帮我解决这个问题吗? 第一次下拉<div class="ui fluid search selection dropdown" id="select_country">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<?php
$sql_country_list="SELECT `id`, `sortname`, `country_name`, `phonecode` FROM `countries`";
if ($stmt = $conn->prepare($sql_country_list)) {
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($id,$sortname,$country_name,$phonecode);
while ($stmt->fetch()) {
?>
<div class="item" data-value="<?php echo $sortname;?>"><i class="<?php echo $sortname;?> flag"></i><?php echo $country_name;?></div>
<?php }}?>
</div>
</div>
第二个下拉列表
<select class="ui search dropdown p_code" id="mobile_country_code" name="mobile_country_code">
<?php
$sql_country_no="SELECT `phonecode` FROM `countries`";
if ($stmt = $conn->prepare($sql_country_no)) {
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($phonecode);
while ($stmt->fetch()){?>
<option value="<?php echo $phonecode;?>"><?php echo $phonecode;?></option>
<?php }}?>
</select>
AJAX致电
$('#select_country').dropdown({
onChange: function(val) {
$.ajax({
url:"process.php?key=country_mobilecode",
method:"POST",
data:'country_id='+val,
success:function(data){
$('.p_code').html(data);
//alert(data);
}
});
}
});
Process.php
$country_sc=$conn->real_escape_string(trim($_POST['country_id']));
$state_data="SELECT phonecode FROM `countries` WHERE sortname=?";
if ($stmt = $conn->prepare($state_data)) {
$stmt->bind_param("s", $country_sc);
$stmt->execute();
$stmt->bind_result($phonecode);
while ($stmt->fetch()) {
$states="<option value=".$phonecode.">".$phonecode."</option>";
echo $states;
}
$stmt->close();
}
答案 0 :(得分:0)
在您的process.php中,您正在创建列表框项目,即国家/地区移动代码。您只需打印作为ajax调用输出的响应(如果您创建html内容作为响应)
<select class="ui search dropdown p_code" id="mobile_country_code" name="mobile_country_code">
//print your ajax response
</select>
但更标准的方法是从ajax页面获取结果是json并在页面本身中创建列表框数据
答案 1 :(得分:0)
您应该使用JSON数组来传递新选项。 建议不要修改html级别的选择选项。 这是代码。
$('#select_country').dropdown({
onChange: function(val) {
$.ajax({
url:"process.php?key=country_mobilecode",
method:"POST",
dataType:"json",
data:'country_id='+val,
success:function(data){
$('.p_code').empty();
$.each(data.options, function (i, item) {
$('.p_code').append($('<option>', {
value: item.value,
text : item.text
}));
});
}
});
}
});
Process.php
$country_sc=$conn->real_escape_string(trim($_POST['country_id']));
$state_data="SELECT phonecode FROM `countries` WHERE sortname=?";
if ($stmt = $conn->prepare($state_data)) {
$stmt->bind_param("s", $country_sc);
$stmt->execute();
$stmt->bind_result($phonecode);
while ($stmt->fetch()) {
$new_option[options][]=array('value'=>$phonecode,'text'=>$phonecode);
}
$stmt->close();
}
echo json_encode($new_option);