javascript - 输入上的 Jquery .on(change) 事件仅更改第一行。

转载 作者：行者123 更新时间：2023-11-29 21:38:12 24 4

我有一个表，人们可以在其中添加行。

表中有一个选择输入，当更改时，通过 ajax 更改第二个选择字段中的值。

我遇到的问题是，如果一个人向表中添加了额外的行，则 .on(change) 事件会更改第一行中的第二个字段，而不是后续行。

我一直在绞尽脑汁，试图弄清楚我是否需​​要(如果需要的话如何)动态更改事件绑定(bind)的 div id 以及它影响的 div。这是解决方案吗？如果是这样，有人可以演示我如何实现这一目标吗？

HTML 表单为

<form action="assets.php" method="post">
<button type="button" id="add">Add Row</button>
<button type="button" id="delete">Remove Row</button>
<table id="myassettable">
<tbody>
    <tr>
        <th>Asset Type</th>
    <th>Manufacturer</th>
    <th>Serial #</th>
    <th>MAC Address</th>
    <th>Description</th>
    <th>Site</th>
    <th>Location</th>
</tr>
<tr class="removable">
    <!--<td><input type="text" placeholder="First Name" name="contact[0][contact_first]"></td>
    <td><input type="text" placeholder="Surname" name="contact[0][contact_surname]"></td>-->
    <td><select name="asset[0][type]">
    <option><?php echo $typeoption ?></option>
    </select></td>
    <td><select class="manuf_name" name="asset[0][manuf]">
    <option><?php echo $manufoption ?></option>
    </select></td>
    <td><input type="text" placeholder="Serial #" name="asset[0][serial_num]"></td>
    <td><input type="text" placeholder="Mac Address" name="asset[0][mac_address]"></td>
    <td><input type="text" placeholder="Name or Description" name="asset[0][description]"></td>
    <td><select id="site" name="asset[0][site]">
    <option><?php echo $siteoption ?></option>
    </select></td>
    <td><input type="text" placeholder="e.g Level 3 Utility Room" name="asset[0][location]"></td>
    <td><select id="new_select" name="asset[0][contact]"></select></td>
    <!--<td><input type="email" placeholder="Email" name="contact[0][email]"></td>
    <td><input type="phone" placeholder="Phone No." name="contact[0][phone]"></td>
    <td><input type="text" placeholder="Extension" name="contact[0][extension]"></td>
    <td><input type="phone" placeholder="Mobile" name="contact[0][mobile]"></td>-->
</tr>
</tbody>
</table>
<input type="submit" value="Submit">
<input type="hidden" name="submitted" value="TRUE" />
</form>

我的脚本是

<script type="text/javascript">
$(document).ready(function() {
    $("#add").click(function() {
        var newgroup = $('#myassettable tbody>tr:last');
     newgroup
        .clone(true) 
        .find("input").val("").end()
     .insertAfter('#myassettable tbody>tr:last')
     .find(':input')
        .each(function(){
            this.name = this.name.replace(/\[(\d+)\]/,
            function(str,p1) {
            return '[' + (parseInt(p1,10)+1)+ ']'
            })

     })

            return false;         

      });


    });  

    $(document).ready(function() {
    $("#delete").click(function() {
        var $last = $('#myassettable tbody').find('tr:last')
        if ($last.is(':nth-child(2)')) {
            alert('This is the only one')
        } else {
     $last.remove()        
    }
 });
 });

$(document).ready(function() {
$("#myassettable").on("change","#site",function(event) {
    $.ajax ({
        type    :   'post',
        url : 'assetprocess.php',
        data: {
        get_option  :   $(this).val()           
        },
        success: function (response) {
    document.getElementById("new_select").innerHTML=response;
}                   
            })  
        }); 
    });

</script>

assetprocess.php 页面是

<?php
if(isset($_POST['get_option'])) {

//Get the Site Contacts

$site = $_POST['get_option'];
$contact = "SELECT site_id, contact_id, AES_DECRYPT(contact_first,'" .$kresult."'),AES_DECRYPT(contact_surname,'" .$kresult."') FROM contact WHERE site_id = '$site' ORDER BY contact_surname ASC";
$contactq = mysqli_query($dbc,$contact) or trigger_error("Query: $contact\n<br />MySQL Error: " .mysqli_errno($dbc));

if ($contactq){
//$contactoption = '';
echo '<option>Select a Contact (Optional)</option>';
while ($contactrow = mysqli_fetch_assoc($contactq)) {
    $contactid = $contactrow['contact_id'];
    $contactfirst = $contactrow["AES_DECRYPT(contact_first,'" .$kresult."')"];
    $contactsurname = $contactrow["AES_DECRYPT(contact_surname,'" .$kresult."')"];
$contactoption .= '<option value="'.$contactid.'">'.$contactsurname.', '.$contactfirst.'</option>';
echo $contactoption;
}
}

exit;

}
?>

代码丑陋如罪，但这只是现阶段的一个自利项目。

任何帮助将不胜感激。

干杯，

J.

最佳答案

工作示例:https://jsfiddle.net/Twisty/1c98Ladh/3/

一些小的 HTML 更改:

<form action="assets.php" method="post">
  <button type="button" id="add">Add Row</button>
  <button type="button" id="delete">Remove Row</button>
  <table id="myassettable">
    <tbody>
      <tr>
        <th>Asset Type</th>
        <th>Manufacturer</th>
        <th>Serial #</th>
        <th>MAC Address</th>
        <th>Description</th>
        <th>Site</th>
        <th>Location</th>
      </tr>
      <tr class="removable">
        <td>
          <select name="asset[0][type]">
            <option>---</option>
            <option>Type Option</option>
          </select>
        </td>
        <td>
          <select class="manuf_name" name="asset[0][manuf]">
            <option>---</option>
            <option>
              Manuf Option
            </option>
          </select>
        </td>
        <td>
          <input type="text" placeholder="Serial #" name="asset[0][serial_num]">
        </td>
        <td>
          <input type="text" placeholder="Mac Address" name="asset[0][mac_address]">
        </td>
        <td>
          <input type="text" placeholder="Name or Description" name="asset[0][description]">
        </td>
        <td>
          <select id="site-0" class="chooseSite" name="asset[0][site]">
            <option>---</option>
            <option>
              Site Option
            </option>
          </select>
        </td>
        <td>
          <input type="text" placeholder="e.g Level 3 Utility Room" name="asset[0][location]">
        </td>
        <td>
          <select id="new-site-0" name="asset[0][contact]">
          </select>
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="Submit">
  <input type="hidden" name="submitted" value="TRUE" />
</form>

这使得 id 准备好在我们添加新元素时递增。利用class，我们可以将.change()绑定(bind)到它们中的每一个。

$(document).ready(function() {
  $("#add").click(function() {
    var newgroup = $('#myassettable tbody>tr:last');
    newgroup
      .clone(true)
      .find("input").val("").end()
      .insertAfter('#myassettable tbody>tr:last')
      .find(':input')
      .each(function() {
        this.name = this.name.replace(/\[(\d+)\]/,
          function(str, p1) {
            return '[' + (parseInt(p1, 10) + 1) + ']';
          });
      });
    var lastId = parseInt(newgroup.find(".chooseSite").attr("id").substring(5), 10);
    newId = lastId + 1;
    $("#myassettable tbody>tr:last .chooseSite").attr("id", "site-" + newId);
    $("#myassettable tbody>tr:last select[id='new-site-" + lastId + "']").attr("id", "new-site-" + newId);
    return false;
  });

  $("#delete").click(function() {
    var $last = $('#myassettable tbody').find('tr:last');
    if ($last.is(':nth-child(2)')) {
      alert('This is the only one');
    } else {
      $last.remove();
    }
  });

  $(".chooseSite").change(function(event) {
    console.log($(this).attr("id") + " changed to " + $(this).val());
    var target = "new-" + $(this).attr('id');
    /*$.ajax({
      type: 'post',
      url: 'assetprocess.php',
      data: {
        get_option: $(this).val()
      },
      success: function(response) {
        $("#" + target).html(response);
      }
      });*/
    var response = "<option>New</option>";
    $("#" + target).html(response);
  });
});

可以通过在全局空间中设置行数计数器(例如 var trCount = 1;)并使用它来设置数组索引和 ID 来节省一些时间。克隆既快速又简单，但这也意味着我们必须返回并附加各种属性。还可以创建一个函数来为您绘制 HTML。喜欢:https://jsfiddle.net/Twisty/1c98Ladh/10/

function cloneRow(n) {
  if (n - 1 < 0) return false;
  var html = "";
  html += "<tr class='removable' data-row=" + n + ">";
  html += "<td><select name='asset[" + n + "][type]' id='type-" + n + "'>";
  html += $("#type-" + (n - 1)).html();
  html += "<select></td>";
  html += "<td><select name='asset[" + n + "][manuf]' id='manuf-" + n + "'>";
  html += $("#manuf-" + (n - 1)).html();
  html += "<select></td>";
  html += "<td><input type='text' placeholder='Serial #' name='asset[" + n + "][serial_num]' id='serial-" + n + "' /></td>";
  html += "<td><input type='text' placeholder='MAC Address' name='asset[" + n + "][mac_address]' id='mac-" + n + "' /></td>";
  html += "<td><input type='text' placeholder='Name or Desc.' name='asset[" + n + "][description]' id='desc-" + n + "' /></td>";
  html += "<td><select name='asset[" + n + "][site]' class='chooseSite' id='site-" + n + "'>";
  html += $("#site-" + (n - 1)).html();
  html += "<select></td>";
  html += "<td><input type='text' placeholder='E.G. Level 3 Utility Room' name='asset[" + n + "][location]' id='loc-" + n + "' /></td>";
  html += "<td><select name='asset[" + n + "][contact]' id='contact-" + n + "'><select></td>";
  html += "</tr>";
  return html;
}

这需要更多的前期工作，但对每个部分提供了更多的控制。并且以后使用起来更容易。

关于javascript - <select> 输入上的 Jquery .on(change) 事件仅更改第一行。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34746133/

24 4 0

文章推荐： mysql - 从代码或存储过程mysql插入

文章推荐： android - Libgdx:屏幕管理器

文章推荐： MySQL不确定聚合函数

文章推荐： android - FragmentTransaction 与 CustomAnimation android 4+

• javascript - react JSX : selecting "selected" on selected

option

在 的 React 组件中菜单，我需要设置selected反射(reflect)应用程序状态的选项的属性。 在 render() , optionState从状态所有者传递给 SortMenu 组件

mysql - 如何让我的存储过程变得又快又漂亮...( select . select. select .. )

我是初级 Ruby-mysql 程序员，我想知道如何使我的(存储过程)查询结果更快.. 这是我的存储过程我正在使用 SQL_CACHE.. 但我不确定.. 缓存使我的过程更快.. : ( DROP

java - Python 中的 select.select 相当于 Java 中的 select.select

我一直在 Python 中进行套接字编程，以使用 select.select(rfile, wfile, xlist[, timeout]) 处理由已连接的客户端套接字列表发出的请求，并且我还想用 J

select - 尊重空白填充以固定宽度显示列

我试图通过用空格填充文本来创建下拉列表中的列效果，如下例所示: [Aux1+1] [*] [Aux1+1] [@Tn=PP] [Main] [*] [Main A

select - JPA - MAX of COUNT 或 SELECT FROM SELECT

我为 MySQL 编写了以下查询: SELECT subquery.t1_column1, subquery.t2_id, MAX(subquery.val) FROM ( S

jquery - 为什么我们用 select 标签编写 .attr ('selected' ,'selected' )

为什么我们要用 select 标签来编写.attr('selected','selected') 例如: $('#countryList option').filter(function () {

select - "selected"选项上的标签在选择具有FormControlname时不起作用

Lokalizacja: Gdańsk Rzeszów Wrocław 不知道发生了什么，但在那种情况下没有选择的选项，我必须从列表中选择一些东西。当我从选

jquery - removeAttr ("selected") 和 .attr ('selected' ,'selected' ) 无法正常工作

我的表单中有两个选择字段。第一个是单选，另一个是多选。现在我想做的是根据单选中所选的选项，使用给定的数据选择多选中的选项。为此，我在单选更改时触发 ajax 请求: $.ajax({ type

select - Firefox 5 在页面刷新时不使用 select ="selected"值，保留旧值

我在 Firefox 5 中发现了一个奇怪的错误(我现在无法访问 4)。但是，我认为它可能在 Firefox 4 中工作，因为我刚买了一台新电脑，而且我不记得以前见过这个错误。 我有几个选择框。所选值

MySQL: select * from table 和 select * from (select* from table) 的区别

此 SQL 有何不同: 第一个: select * from table_1 a join table_2 b on a.id = b.acc_id 第二个: select * f

html - HTML <选项> : selected VS selected ="selected" 的最佳实践

预选 的最佳做法是什么？在 ？ 根据不同的网站，两者都有效。但是哪个更好呢？最兼容？ Foo Bar 最佳答案 如果您正在编写 XHTML，则 selected="selected" 是必需的。 如

javascript - Angular JS : "Select All" options of "multi-select select box"

我使用 Angular JS 创建了一个多选选择框:下面是相同的代码: JS: $scope.foobars = [{ 'foobar_id': 'foobar01', 'name':

select - 在列上使用

editoptions 时如何获取 jqGrid 中 select 的值

我在 jqGrid 中有几列 edittype="select"。如何读取特定行中当前选定值的选项值？ 例如:当我提供以下选项时，如何获得 FedEx 等的“FE” editoption: { val

sql - 内部连接到 select 语句，其中内部 select 语句的 where 子句引用外部 select？

这是我更大问题的精简查询，但要点是我试图内部联接到一个选择，其中选择受到外部选择的限制。那可能吗？我在内部选择上收到有关多部分标识符 S.Item 和 S.SerialNum 的错误。 要点是这样的，

mysql - 如何实现这个:MYSQL SELECT if true select a else select b?

如果chat.chat_type IS NULL，我想选择user.*，但如果chat.chat_type = 1 我想选择组。* SELECT CASE WHEN ch

HTML defaultValue 属性(但不是 变体)

我正在编写一个小脚本来测试表单在提交之前是否已被更改。所以我可以使用普通输入(文本、文本区域等): if(element.defaultValue != element.value) { al

javascript - 将选项从

移动到 - 选项 select 属性被破坏了吗？

我正在尝试为 Prototype 编写一个插件，用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前，一切都很好。我正在使用 PHP 来使用

Mongodb select with condition is selected result must in sub select query

你如何在 MongoDB 中进行嵌套选择，类似于 SELECT id FROM table1 WHERE id IN (SELECT id FROM table2) 最佳答案 MongoDB 尚不具备

Angular 2 : Select dropdown not selecting option despite "selected" attribute

我有以下用于选择下拉列表的代码: {{unit.Text}} UnitOfMeasurements 数组中的每一项看起来像这样: Selected: false Text: "lb" Va

Use [ngValue] and [selected] in select tag(在选择标记中使用[ngValue]和[selected])

我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因，它们似乎无法相提并论。。示例代码：。这段代码最终只显示空白作为缺省值。如果删除[ngValue]，它就

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

• html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
• JMeter 在响应断言中使用 span 标签的问题
• html - 在 :hover and :active? 上具有不同效果的 CSS 动画
• html - 相对于居中的 html 内容固定的 CSS 重复背景？

滴滴打车优惠券免费领取

全站热门文章

• 现代IT基础设施管理（1）：Terraform初识和小试牛刀
• 推荐一个Star超过2K的.Net轻量级的CMS开源项目
• 【Playwright+Python】系列（九）Playwright调用Chrome插件，小白也能事半功倍
• (1)Pytorch深度学习—数值处理
• 如何使用Flask编写一个网站
• Qml中的那些坑(七)---ComboBox嵌入Popup时，滚动内容超过其可见区域不会关闭ComboBox弹窗
• 鸿蒙NEXT开发案例：指尖轮盘
• 使用ob_tools包收集分析oceanbase数据库oracle租户缓慢sql语句
• Quartz集群增强版_00.Howtouse？(如何使用)
• 开发人员，千万不要去碰那该死的业务参数，无论什么时候！

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com