Question

我有FORM仅包含一个对象。当我将select更改为另一个值时，继续使用jquery脚本并将POST数据发送到php脚本。工作良好。但是，如果我从mysql数据库中读取了一些数据-使用周期while {} ... html页面上有N个对象...并且jquery函数不起作用

这是带有一个SELECT的功能代码-效果很好。当我添加更多的SELECT（在代码示例的第一部分之后）并单击第一个SELECT时，也可以使用。但是当我单击并更改另一个选择时，什么也没发生。

<form action="" method="POST">
<select name="role" id="roleId">
  <option label="test" value="1"> test  </option>
  <option label="test2" value="2"> test2  </option>
  <option label="test3" value="3"> test3  </option>
</select>
</form>

$("#roleId").on("change", function() {
    var idSdot = this.value;
    $.post("php-script.php", {id: idS}, function ( data ){
      alert(data);
    }, "html");
});

----------------------------------------------
more SELECTS on html :

<form action="" method="POST">
<select name="role" id="roleId">
  <option label="test" value="1"> test  </option>
  <option label="test2" value="2"> test2  </option>
  <option label="test3" value="3"> test3  </option>
</select>

<select name="role" id="roleId">
  <option label="test" value="4"> test  </option>
  <option label="test2" value="5"> test2  </option>
  <option label="test3" value="6"> test3  </option>
</select>


<select name="role" id="roleId">
  <option label="test" value="7"> test  </option>
  <option label="test2" value="8"> test2  </option>
  <option label="test3" value="9"> test3  </option>
</select>

</form>

我应该如何更新FORM和jquery部分？谢谢

Answer 1

每个选择元素都必须基于您的ex具有不同的ID。您对所有选择都使用roleId，这就是原因（每个选择应使用不同的ID）

Answer 2

向每个选择列表添加一个类值（class =“ role”）

然后修改您的jquery更改函数以按类而不是ID监听

$（“。role”）。on（“ change”，function（）

这将告诉它具有该类的任何元素都应触发该函数。

默认情况下，元素的默认ID应该是唯一的，因此它只会在找到ID的第一个元素上触发。

例如，您的html更改为：

    <form action="" method="POST">
        <select name="role" id="roleId" class="role">
            <option label="test" value="1"> test  </option>
            <option label="test2" value="2"> test2  </option>
            <option label="test3" value="3"> test3  </option>
        </select>
        <select name="role" id="roleId2" class="role">
            <option label="test" value="4"> test  </option>
            <option label="test2" value="5"> test2  </option>
            <option label="test3" value="6"> test3  </option>
        </select>


        <select name="role" id="roleId3" class="role">
            <option label="test" value="7"> test  </option>
            <option label="test2" value="8"> test2  </option>
            <option label="test3" value="9"> test3  </option>
        </select>
    </form>

然后您的JS更改为：

<script type="text/javascript">
    $(".role").on("change", function () {
        alert(this.value)
    });
</script>

在单击<选择>发送表单-多个“选择”对象

2 个答案: