如何使用一个 Jquery 函数来处理多个 onchange (HTML) 事件答案

【问题标题】：How to use one Jquery function to handle multiple onchange (HTML) events如何使用一个 Jquery 函数来处理多个 onchange (HTML) 事件
【发布时间】：2021-09-09 14:31:40
【问题描述】：

我有多个项目名称下拉字段以及价格字段。选择项目时，应在价格字段中更新相应的价格。

-----HTML-----

<tbody>
        <tr class="d-flex"> 
         <td class="col-sm-5">
          <div class="form-outline">
            <select  id="selectitem1" class="form-control" onchange="myFunction(event)">
                <option selected disabled="True">--- select --- </option>
                 {% for item in showdrop %}
                <option value="{{item.item_price}}" class="form-control" style="color:gray" font-size="20">{{item.item_name}}</option>
                {% endfor %}
            </select>  
        </div>
    </td>
    <td class="col-sm-2">
     <div class="form-group">
        <input id="myText1" type="text" class="form-control price" value=" " name="price">
    </div>
    </td>
   </tr>

        <tr class="d-flex"> 
         <td class="col-sm-5">
          <div class="form-outline">
            <select  id="selectitem2" class="form-control" onchange="myFunction(event)">
                <option selected disabled="True">--- select --- </option>
                 {% for item in showdrop %}
                <option value="{{item.item_price}}" class="form-control" style="color:gray" font-size="20">{{item.item_name}}</option>
                {% endfor %}
            </select>  
        </div>
    </td>
    <td class="col-sm-2">
     <div class="form-group">
        <input id="myText2" type="text" class="form-control price" value=" " name="price">
    </div>
    </td>
   </tr>
</tbody>

---- 功能-----

function myFunction(e) {
        document.getElementById("myText1").value = e.target.value
        }

【问题讨论】：

标签： javascript html jquery django

【解决方案1】：

基本上，您需要将第二个参数传递给您的函数以使其动态化。

更改以下内容：

<select  id="selectitem1" class="form-control" onchange="myFunction(event)">

收件人：

<select  id="selectitem1" class="form-control" onchange="myFunction(event, 1)">

（并重复您的第二次选择，但将 1 替换为 2 等等......）

然后将您的功能更改为：

function myFunction(e, index) {
    document.getElementById("myText" + index).value = e.target.value
}

【讨论】：

【解决方案2】：

你可以在你的函数中传递this。基于this 遍历DOM 找到您的目标并设置值。有很多方法可以找到欲望元素。

function myFunction(e) {
  $(e).parents('td').next('td').find('.price').val($(e).val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-5">
        <div class="form-outline">
          <select id="selectitem1" class="form-control" onchange="myFunction(this)">
            <option selected disabled="True">--- select --- </option>

            <option value="1" class="form-control" style="color:gray" font-size="20">1</option>
            <option value="2" class="form-control" style="color:gray" font-size="20">2</option>

          </select>
        </div>
      </td>
      <td class="col-sm-2">
        <div class="form-group">
          <input id="myText1" type="text" class="form-control price" value=" " name="price">
        </div>
      </td>
    </tr>

    <tr class="d-flex">
      <td class="col-sm-5">
        <div class="form-outline">
          <select id="selectitem2" class="form-control" onchange="myFunction(this)">
            <option selected disabled="True">--- select --- </option>
            <option value="3" class="form-control" style="color:gray" font-size="20">3</option>
            <option value="4" class="form-control" style="color:gray" font-size="20">4</option>
          </select>
        </div>
      </td>
      <td class="col-sm-2">
        <div class="form-group">
          <input id="myText2" type="text" class="form-control price" value=" " name="price">
        </div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

这里没有添加完整的html代码！对不起！！！在我的场景中，一个 tr 包含 4 个 td。 Itemname,nos,price,amount---在相同的顺序。我试过这个代码，它没有工作。