通过动态下拉菜单在同一页面上显示最终结果

Question

我有一个下拉菜单，来自国家/州/城市/目的地。

我希望该插件接下来要做的是，一旦选择了目标菜单，该页面将自动在同一页面上显示有关该目标的一些常规信息，而无需重新加载。

常规信息与我的目的地下拉菜单位于同一表中，但位于不同的列下。

因此，只有在选择了最终的展示菜单后，如何才能在文本框中或类似内容中显示此信息。

到目前为止，这是我的代码的某些部分，我认为发布所有内容都不是必要的，并且可能会有些混乱。 PS-我是初学者。

这是我的javascript的示例，该javascript从我的ajax.php文件中调用数组以填充下拉菜单...

jQuery(".wrap").on('change', '#city', function() {
            var querystr2 = 'cityid=' +jQuery('#city :selected').val();
            jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr2, function(data) {
                if(data.errorcode ==0){
                    jQuery('#descbo').html(data.chtml)
                }else{
                    jQuery('#descbo').html(data.chtml)
                }
            }, "json");
        });

这是我的ajax.php文件的一部分，jQuery的先前示例从中获取信息。

$city_id = isset($_POST['cityid']) ? $_POST['cityid'] : 0;
if ($city_id <> 0) {
$errorcodeD = 0;
$strmsg = "";
$sqlD="SELECT * from destination WHERE IDCity = ". $city_id . " ORDER BY name;";
$resultD=mysql_query($sqlD);
$contD=mysql_num_rows($resultD);
if(mysql_num_rows($resultD)){
    $chtmlD = '<select name="destination" id="destination"><option value="0">--Select   Destination--</option>';
    while($row = mysql_fetch_array($resultD)){
        $chtmlD .= '<option   value="'.$row['IDDestination'].'">'.$row['name'].'</option>';
    }
    $chtmlD .= '</select>';
    echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
}else{
    $errorcodeD = 1;
    $strmsg = '<font style="color:#F00;">No Destination available</font>';
    echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$strmsg));
}

我的html部分将显示所有内容。

<h2>Destination</h2>
        <div class="wrap" id="descbo">
        </div>

因此，基本上，无论用户选择什么目的地，该目的地的特定信息都将在单独的框或文本区域中在屏幕上显示其自身。

谢谢！

Answer 1

因此，如果我理解正确，那么当选择了特定的目标位置时，您希望您的php脚本从destination表返回数据。 您说过您不想重新加载页面，但是我假设您可以向服务器发出另一个AJAX请求。 在这种情况下，您可以简单地为destination <select>创建另一个委托的jQuery处理程序：

jQuery(".wrap").on('change', '#destination', function() {
    var data = {destinationid: this.value};
    jQuery.post("url/to/script.php", data)
        .done(function(response) {
            jQuery('#descbo').html(response.html);
        });

然后，在您的PHP中，您可能会有类似以下内容：

$destination_id = isset($_POST['destinationid']) ? $_POST['destinationid'] : 0;
...
$sqlD="SELECT * from destination WHERE ID = ". $destination_id . " ORDER BY name;";
$resultD=mysql_query($sqlD);
if(mysql_num_rows($resultD)){
    $chtmlD = '<div class="destination">';
    while($row = mysql_fetch_array($resultD)){
        $chtmlD .= '<p>' . $row['whatever'] . '</p>';
    }
    $chtmlD .= '</div>';
    echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
} else {
...
}

这将用包含目标描述（或任何内容）的div替换原始目标<select> 。 如果您不想替换选择，则可以让JS更新页面上的其他元素，例如

jQuery('#some_other_element').html(response.html);