Question

我在整个Stackoverflow中看过并看过很多这样的例子，但没有给出如何回应的答案。我有一个名为testing.php的页面上的选择下拉列表：

<form id="projects" action="project-add.php" method="POST">
<select name="territory" id="territory">
<option value="Australia">Australia</option>
<option value="Argentina">Argentina</option>
</select>

// A fair few more form fields here

<input type="submit" value="Submit Project">
</form>

我现在需要在这里选择的任何内容可以在以后的表单中作为php变量回显，而无需按下按钮。

我在：

中有以下脚本

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#territory').change(function(e) {
    e.preventDefault();
    var selectedOption = $(this).find('option:selected');
    $('#territory option').removeAttr('selected');
    $(selectedOption).attr('selected','selected');
    var selectedOptionValue = $(selectedOption).val();
    var selectedOptionText = $(selectedOption).text();


    $.ajax({
    url: 'testing.php', 
    type: 'POST', 
    data: {data : selectedOptionText},
    dataType: 'text',
    success: function(data){ }
 });
 });//]]>


 });

</script>

然后我想打印：

<? echo $_POST['data']; ?>

但这不起作用。感谢您的帮助。

提前致谢

Answer 1

DEMO

1。您需要能够触发更改

<select name="territory" id="territory">
  <option value="">Please select</option>
  <option value="Australia">Australia</option>
  <option value="Argentina">Argentina</option>
</select>

2。然后使用所选选项

调用php

$(function() { // on page load
  $('#territory').on("change",function(e) {
    $("#someOutputContainerID").empty(); // clear the container
    var selectedOptionValue = $(this).val();
    if (selectedOptionValue) { // in case they select "Please select"
      $.ajax({
        url: 'testing.php', 
        type: 'POST', 
        data: {data : selectedOptionValue },
        dataType: 'text',
        success: function(data){
          $("#someOutputContainerID").html(data);
        }
      });
    }
  });
});

现在，test.php中的所选值为$_POST["data"]，并且在tests.php中回显的任何内容都将显示在容器中

Answer 2

我假设您有一个要显示它的元素。在我的示例中，我称之为#element。

使用JS脚本中的selectedOptionValue通过添加此行#element

来显示$('#element').text( selectedOptionValue );中的值

完成功能：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#territory').change(function(e) {
    e.preventDefault();
    var selectedOption = $(this).find('option:selected');
    $('#territory option').removeAttr('selected');
    $(selectedOption).attr('selected','selected');
    var selectedOptionValue = $(selectedOption).val();

    /* Added this rule */
    $('#element').text( selectedOptionValue );

    var selectedOptionText = $(selectedOption).text();


    $.ajax({
    url: 'testing.php', 
    type: 'POST', 
    data: {data : selectedOptionText},
    dataType: 'text',
    success: function(data){ }
 });
 });//]]>


 });

</script>

Answer 3

您发布的数据不会在php $_POST超全局中提供;你需要在ajax的响应中捕获它。这确实依赖于＆＃39; testing.php＆＃39;回应适当的响应（可能使用json_encode）来确保。在开始将其放入DOM之前，您可以使用console.log(response)来试验您的响应。

LinkinTED的答案也很有效，虽然可以说使用ajax更合适 - 因为它只会在ajax响应正确回复时显示。

它确实取决于testing.php的作用;如果ajax函数写入数据库，那么使用ajax肯定会更好 - 如果你真的只想在页面上生成文本，那么最好坚持使用javascript并依赖客户端。

Answer 4

修改了您的代码，经过测试并100％正常工作


    <script type='text/javascript'>
            $('#territory').on('change', function() {
                var selectedOptionText = $("#territory option:selected").text();
                $.ajax({
                    url: 'testing.php',
                    type: 'POST',
                    data: {data: selectedOptionText},
                    dataType: 'text',
                    success: function (data) {
                         alert("success"+data);
                    }
                });
            });

        </script>

Answer 5

您的代码运行正常。 testing.php回显发布的值。由于您是通过ajax调用访问它，因此响应本身将进入ajax成功函数。如果您想使用来自testing.php的数据，请相应地修改您的成功函数。

$.ajax({
url: 'testing.php', 
type: 'POST', 
data: {data : selectedOptionText},
dataType: 'text',
success: function(data)
{
    $("body").append(data);
}

如果你想在本页面和testing.php页面的范围外使用发布的值，你需要将它保存在某个地方（在会话，数据库等）。

使用Ajax，Jquery和PHP Echo打印选择选项

5 个答案: