javascript - PHP textarea 结合 select Change 和 .load() 函数

Question

我有一个文本区域，我将在其中加载与我选择的值相对应的术语。我使用 .load("load_myinvoices_default_terms.php?id="+id) 将内容加载到文本区域。我可以成功加载内容。但是当我在文本区域上输入内容然后更改所选选项时，.load() 函数将不再加载。

我的预感是，当我在文本区域上键入时，它会放在值上，而当我使用 .load 时，它会放在 html 上。 我只是希望能够在文本区域上键入内容，并且当我更改所选选项时仍然能够更改它的值。

发票.php:

<select id="setDefaultTermSelection" name="invoice_term_id" onChange="load_myinvoices_default_terms();">
    <option value="0">Set as new term</option>
    <option value="1">Term 1</option>
    <option value="2">Term 2</option>
</select>

<textarea id="default_terms" name="invoice_terms" placeholder="Enter your terms and conditions" rows="5"></textarea>

脚本:

<script type="text/javascript">

function load_myinvoices_default_terms()
{
    var id = $("#setDefaultTermSelection").val();
    $("#default_terms").load("load_myinvoices_default_terms.php?id="+id);
}

$("#default_terms").keyup(function(e)
{
    $("#setDefaultTermSelection").val(0);
});
</script>

load_myinvoices_default_terms.php:

<?php
    include ("includes/connection.php");

    $id = $_REQUEST['id'];

    if($id > 0)
    {
        $query = "SELECT * FROM terms WHERE user_id = $_SESSION[user_id] AND term_id = $id";
        $selectQuery = mysqli_query($con,$query);
        $row = mysqli_fetch_array($selectQuery);

        echo $row['term_description'];
    }
    else
        echo "";
?>

Answer 1

发生的情况是，当您以编程方式设置选择值时，如下所示:$("#setDefaultTermSelection").val(0); 、事件change 未触发。

onchange仅当用户点击时触发。来自 MDN :

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

但是，您可以使用 jQuery 的 trigger() 手动触发更改(“模拟” 用户点击)方法。像这样的事情:

$("#setDefaultTermSelection").val("0");
$("#setDefaultTermSelection").trigger("change");

或者(一行):

$("#setDefaultTermSelection").val("0").change();

在最后一个示例中， .change() 是 .trigger("change") 的别名

几点:

1. value里面<option>标签是一个字符串。因此，您应该将值设置为 .val("0"); .
2. 事件根据specification实际上是onchange ，而不是onChange (大写“C”)。然而，现代浏览器实际上接受这两种方式。