根据选择框中的选择显示文本答案

【问题标题】：Display text depending on a choice made in select box根据选择框中的选择显示文本
【发布时间】：2012-05-24 13:38:32
【问题描述】：

我如何运行一个 PHP 查询，该查询仅在从选择下拉列表中选择一个选项时运行，但每次选择不同选项时都会刷新？

例如，这里是 HTML：

<html>
<head>
<script type="text/javascript" src="/hr/includes/jui/js/jquery-ui-1.8.20.min.js"</script>
<script>
$(document).ready(function() {
    $('#select_box_1').change(function() {
       if($(this).val() != '')
        $.ajax({
            type: 'get',
            url: 'balance1.php',
            data: 'value' + $(this).val() ,
            success: function(data) {
                $("#result-div").html(data);
            }
        });
     }
    });
});
</script>
</head>

<body>

<form name="form" id="form" method="post" action="validate.php">

<div id="select_box_1">
<select name="drop_down">
<option value="">Please choose</option>
<option value="1">John</option>
<option value="2">Bob</option>
<option value="3">Mike</option>
</select>
</div>

<div id="result-div">

</div>

<input type="submit">

</form>

</body>

</html>

balance1.php

<?php 
print "GET Value:".$_GET['value'];
?>

我想根据选择的值在选择框下方运行查询 - 例如，当没有选择任何内容时，没有运行查询。如果用户从列表中选择 John，则查询在 id=1 的位置运行并显示 John 的结果。如果用户随后选择 Bob，查询应该在 id=2 的地方再次运行，以此类推？

【问题讨论】：

使用 AJAX（例如.ajax() 或.get()）。

标签： php javascript jquery

【解决方案1】：

这是有效的：

[...]
<select name="drop_down" id="sel_something">
[...]

$('#sel_something').change(function() {
    if($(this).val() != '') {
        $.ajax({
            type: 'get',
            url: 'someurl',
            data: { 'value' : $(this).val() } ,
            success: function(data) {
                // do your stuff
            }
        });
    }
});

我给 select 一个 id 并修改了数据行（并添加了一些语法更正）。

【讨论】：

【解决方案2】：

我建议你使用 jquery.ajax，它比你想象的更强大！下面是使其工作的示例代码

$('#select_box_1').change(function() {
   if($(this).val() != '')
    $.ajax({
        type: 'get',
        url: 'URL To Your PHP Script',
        data: 'value' + $(this).val() ,
        success: function(data) {
            $("#result-div").html(data);
        }
    });
 }
});

编辑：$_GET['value'] 将保存您的 php 脚本中的值，您可以使用该值查询数据库并将结果或输出返回给 ajax 调用，然后您可以简单地在您的html视图

【讨论】：

谢谢你 - 在 url 调用的 PHP 脚本中，我如何从选择框中访问值？即“选择约翰时从数据库中选择名称”，或者选择鲍勃的选择时，从数据库中选择名称= 1”？
现在什么都不做不幸的是，从下拉列表中没有发生任何事情。当我删除 if 语句时，它“起作用”，因为它显示了 php 文件的内容，因此看起来选择中的选项值没有被拾取
请将您的 php 脚本也粘贴到您的问题中，让我看看！
脚本非常庞大，所以为了简化操作，我使用仅包含的脚本尝试了它，但仍然没有任何反应 - 我已经编辑了我的原件以包含整个 HTML，PHP 文件现在实际上只有一个打印 GET 行

【解决方案3】：

如果您在每次下拉列表中的值发生更改时都重新加载页面，那么您可以在 SELECT 标记中使用 onchange 属性。

当值改变时重新加载页面并在 URL 中设置一个 GET 变量。如果此 GET 变量为 NULL，则不处理 PHP 代码...否则相应处理。

【讨论】：

我不会每次都重新加载页面 - 唯一会改变的是在提交表单之前选择框中的值
是的，我知道。我只是问你是否可以重新加载页面。当下拉列表中的值更改时，“onchange”属性中的重新加载功能将导致页面重新加载并再次处理 php 脚本。如果您想在不重新加载页面的情况下执行此操作，那么您可以随时使用 Ajax。

【解决方案4】：

试试这样的：

$("#select_box_1").change(function(){

    if ($(this).val() != "") {

      $.ajax({
         type: "POST",
         url: "foo.php",
         data: "id=" + $("#select_box_1").val(),
         success: function(msg){
           $("#result").text(msg);
         }
      });

    }

});

【讨论】：

在你的 if 条件下你可以这样做 if($(this).val()) 因为$(this).val() 实际上是持有 DOM。问候