通过AJAX自动更新select中的文本

Automatically update text from select via AJAX

本文关键字：文本 select 更新 AJAX 通过      更新时间：2023-09-26

有人知道如何让ajax从选择输入更新文本吗。我的意思是，如果您选择（form->input）某个内容，它将更新/出现在<span>或其他内容中。

这就是我所拥有的：

    <?php
echo '<select name="test">';
      for ($i=0; $i <= 20; $i++) {
        echo '<option value="'.$i.'">'.$i.'</option>';
      }
echo "</select>";
     ?>

并且在<script>:中

    <script>
function upperCase()
{
var A = document.getElementById('test').value;
var B = document.getElementById('txtHint1').value;
C = A * B
document.getElementById('result').value = C; 
} 
    </script>

我想展示的地方：

<span id="txtHint1" onchange="upperCase()"></span>

我希望你能理解我。

我在您最初的问题中看到了几个错误。第一个在这里：

echo "<select name="test">;

由于它是一个双引号字符串，您需要在测试中转义双引号，或者用单引号将字符串括起来。您还缺少一句结束语。应该是这样的：

echo '<select name="test">';

此外，与其将onchange事件绑定到要显示结果的位置，不如将其绑定到更改时希望执行JavaScript的元素。在这种情况下，这将是您的选择。现在我们要做的是：

echo '<select name="test" onchange="upperCase()">';

这行：C = A * B应该看起来更像：

var C = A * B;

此外，您的代码正在尝试设置ID为result的元素的值。根据你的帖子，你可能想把它改成txtHint1。

我假设这是您的场景：

  • 用户从下拉框中选择一个选项
  • 一旦他们选择了自己的选项，该选项的值乘以您的"txtHint1"跨度将显示在"结果"跨度中

首先，你不需要ajax，只需要JavaScript，我相信你的意思。接下来，您不希望在"txtHint1"跨度上进行onchange，因为那里没有什么可更改的。您希望onchange位于"select"元素上。你的代码非常接近。

function upperCase()
{
    var a = document.getElementById('test').value;
    var b = document.getElementById('txtHint1').value;
    var c = a * b;
    document.getElementById('result').value = c;
}
<select name="text" onchange="upperCase()">YOUR PHP CODE<select>

我没有测试这个，但它应该有效。

相关文章：