Question

我正在使用语义UI。我有两个下拉列表。首先是国家/地区名称，其次是国家/地区电话代码。我可以在页面加载时显示数据库中的国家/地区名称和国家/地区代码。

现在我从第一个下拉列表中选择国家/地区名称，因此根据国家/地区名称，我必须在第二个列表中显示国家/地区代码，我还需要第二个下拉菜单中的所有国家/地区电话代码。

我尝试使用AJAX但是使用AJAX我得到了正确的国家/地区电话代码，但它没有显示下拉列表。

例如：如果我选择国家名称＆＃34;美国＆＃34;在第二个下拉国家/地区，电话代码将显示＆＃34; 1＆＃34;。另外，我需要在下拉列表中剩下所有电话代码。

在页面加载中，我在下拉列表中获取国家/地区名称和国家/地区电话代码。

我选择国名＆＃34;阿富汗＆＃34;我得到的国家电话代码是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();
}

Answer 1

在您的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并在页面本身中创建列表框数据

参考示例 Sample Document which describes the process

Answer 2

您应该使用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);

从第一个下拉列表中选择一个国家/地区名称，然后在第二个下拉列表中显示所有国家/地区代码的国家/地区电话代码

2 个答案: