SELECT更改无动于衷

2024-05-19 • 问答

我不知道是否只是因为太长时间才发现问题，或者我只是愚蠢，但我的页面上会有很多（20-30）选择和输入字段，而我想做的就是做到这一点，以便当用户更改SELECT或INPUT字段时，它就会实时将数据提交到数据库中。

我在这里搜索了几乎所有的解决方案和示例，并且在许多排列上花费了几个小时。显然，我缺少了某些东西（出于我自己的缘故，我希望它不会太明显）。

我正在使用带有jQuery的Bootstrap 4（当前）

    <div class=" row align-items-start" id="row-field-36">
        <div class="col-sm-4" style="padding-top:.25em;padding-bottom:.25em;">Incident</div>
        <div class="col-sm-1 text-center" style="padding-top:.25em;padding-bottom:.25em;">
            <select name="t1-field-36" class="form-control form-control-sm text-center" id="t1-field-36"1>
            <option value="0" selected>N/A</option>
            <option value="1"">1</option>
            <option value="2"">2</option>
            <option value="3"">3</option>
        </select>
<!-- begin script t1-field-36 -->
<script>
    $(document).ready(function() {
        $('#t1-field-36').on("changed.bs.select",function () {
            var field = "t1-field-36";
            var value = $(this).val();
            var arg = "1"
            var person = "12345678"
            $.ajax({
                url: "echo.php",type: "post",success: function(result){
                    $("#contentbody").html(result);
                },data: {
                    "person": person,"field": field,"value": value,"arg": arg }
                });
            });
        });
</script>
<!-- end script t1-field-36 -->

应该发生的事情是将字段ID，值，人和任何参数引导回服务器上的另一个脚本以执行实际工作。现在出于诊断目的，“ echo.php”只是打印出发送给它的所有值。我在JS控制台中没有任何错误，而且似乎没有任何东西可以监听这些SELECT框上的事件。

编辑-1：我也尝试过

$(document).ready(function() {
    $('#t1-field-36').change(function(){...

谢谢。

您的HTML格式不正确，并且您将选项标签的片段包装在字符串中。您也没有提供contentbody div。作为附带说明，即使在提供问题代码时，也请确保关闭元素包装。您的divs也没有关闭。

我不知道是否应该将这些内容归功于修剪问题代码，或者它们是否是标记中的实际错误。问题就出在这里:)

至于changed.bs.select，有一些票证和查询表明这没有按预期进行。只需使用change事件。可以通过.change(function() { ... }) 或 .on("change",function() { ... })完成。两者都可以在我提供的代码中工作。

最后，由于您正在等待AJAX响应，因此可能无法获得预期的即时结果。下面的示例将说明以这种方式进行设置时，事情确实会触发，尽管使用AJAX调用可能需要一些时间才能将结果显示在您的contentbody div中（假设其中一个存在：）

$(document).ready(function() {
  console.log("ready");
  $('#t1-field-36').on("change",function() {
  console.log("change event fired");
    var field = "t1-field-36";
    var value = $(this).val();
    var arg = "1"
    var person = "12345678"

    var result = value;
    $("#contentbody").html(result);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=" row align-items-start" id="row-field-36">
  <div class="col-sm-4" style="padding-top:.25em;padding-bottom:.25em;">Incident</div>
  <div class="col-sm-1 text-center" style="padding-top:.25em;padding-bottom:.25em;">
    <select name="t1-field-36" class="form-control form-control-sm text-center" id="t1-field-36" 1>
      <option value="0" selected>N/A</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <div id="contentbody"></div>
  </div>
</div>

可能的有用说明：

我想称其为有根据的猜测，但事实是，这比任何东西都重要。我建议不要在完成每次更改后发送数据库更新请求。

这在一个单独的玩具项目中可能会很好地工作，但是对于其他任何事情，您都将导致服务器需要响应/处理的大量请求-更不用说任何视图更新了。如果这不仅仅是一个宠物项目，那么您很可能会将自己设置为..好吧，全心全意地以某种说话的方式DDos自己，哈哈。

或者，我建议在处理更新之前将更新汇总到客户端。 A.e.在发出一个请求之前，将尽可能多的更改放到一个请求中（如果是决策树类型的情况，则存储尽可能多的逻辑客户端），或者是“实时”信息更新（例如，配置文件或其他内容），请尝试定期保存本地存储，并以较小的间隔/当用户指示他们正在退出或空闲时，发送更新。这类似于Microsoft Word在缓存中保存临时更改。

这取决于您的模型和您自己，当然取决于您在做什么-但我已经看到许多尝试进行即时更新的尝试。当您尝试通过更新协调 all DOM输入事件时，这种方法永远效率不高，有时会引起大量问题。

SELECT更改无动于衷

sjh102495 回答：SELECT更改无动于衷

可能的有用说明：

大家都在问