使用jQuery / JavaScript获取表单更改选择框的操作

Question

我在网页上有多个表单。我想要更改选择框的表单操作。除隐藏字段外，所有表单都相同。没有类或id可以形成。下面是代码结构。

function sortFunction(){
   var action = $(this).closest('form').attr('action');
   alert(action);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="GET" name="FORM_TYPESH" action="xyz">
   <select name="nShip" onchange="sortFunction()">
     <option value="Any">Select Ship:</option>
     <option value="Any">Any</option>
   </select>
</form>
<form method="GET" name="FORM_TYPESH" action="abc">
   <select name="nShip" onchange="sortFunction()">
      <option value="Any">Select Ship:</option>
      <option value="Any">Any</option>
   </select>
</form>

Answer 1

内联js代码不是一个好习惯。但是，如果您需要这样做，传递以下两个参数会很有用：

• this - ＆gt;当前元素
• 事件 - ＆gt;事件对象

因此，请改变您的代码：

<select name="nShip" onchange="sortFunction()">

为：

<select name="nShip" onchange="sortFunction(this, event)">

摘录：

＆＃13;

＆＃13;

function sortFunction(ele, evt){
  var action = $(element).closest('table').find('form').attr('action');
  console.log(action);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" width="100%">
    <table class="header" width="100%" id="AutoNumber2">
        <tbody><tr>

            <td width="100%" colspan="2">

                <div align="center">
                    <center>
                        <table width="99%" cellspacing="0" border="0" cellpadding="0">
                            <tbody><tr>
                                <td align="center" colspan="8" width="100%">
                                    <font size="4">Filter your Results</font> </td></tr>
                            <tr>
                                <form method="GET" name="FORM_TYPERG" action="/international/CruisesQuery_EA.asp"></form>
                                <input type="hidden" name="Client" value="airganesha">
                                <input type="hidden" name="CurrentPage" value="1">
                                <input type="hidden" name="nAct" value="">
                                <input type="hidden" name="SORT_TYPE" value="Date Ascending">

                                <form method="GET" name="FORM_TYPELN" action="/international/CruisesQuery_EA.asp"></form>
                                <input type="hidden" name="Client" value="airganesha">
                                <input type="hidden" name="CurrentPage" value="1">
                                <input type="hidden" name="LastPage" value="">
                                <input type="hidden" name="SORT_TYPE" value="Date Ascending">
                                <form method="GET" name="FORM_TYPESH" action="/international/CruisesQuery_EA.asp"></form>
                                <input type="hidden" name="Client" value="airganesha">
                                <input type="hidden" name="CurrentPage" value="1">
                                <input type="hidden" name="LastPage" value="">
                                <input type="hidden" name="elDate" value="20180201">
                                <input type="hidden" name="lsDate" value="20180301">
                                <input type="hidden" name="erlDate" value="01/02/18">
                                <input type="hidden" name="lstDate" value="01/03/18">
                                <input type="hidden" name="line" value="Any">
                                <input type="hidden" name="linename" value="">
                                <input type="hidden" name="nOperator" value="">
                                <input type="hidden" name="Area" value="Anywhere">
                                <input type="hidden" name="Howlong" value="Any">
                                <input type="hidden" name="Standard" value="Any">
                                <input type="hidden" name="QFly" value="Yes">
                                <input type="hidden" name="wheelchair" value="No">
                                <input type="hidden" name="Children" value="No Preference">
                                <input type="hidden" name="Size" value="Any">
                                <input type="hidden" name="Embark" value="Any">
                                <input type="hidden" name="nAct" value="">
                                <input type="hidden" name="SORT_TYPE" value="Date Ascending">


                                <td align="center" width="144">
                                    <div class="styled-select">
                                        <select name="nShip" onchange="sortFunction(this)">

                                            <option value="Any">Select Ship:</option>
                                            <option value="Any">Any</option>
                                            <option value="496">
                                                Adonia			</option>
                                            <option value="243">
                                                Adventure of the Seas			</option>
                                            <option value="474">
                                                Allure of the Seas			</option>
                                        </select>
                                    </div>
                                </td>

                            </tr>
                            </tbody>
                            </table>
                        </center>
                    </div>
        </td>
        </tr>
        </tbody>
        </table>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在运行该事件处理程序时，this的上下文似乎是window，而不是<select>元素。幸运的是，既然你已经在使用jQuery，你可以简单地使用jQuery来附加你的事件处理程序。删除该函数并从标记中删除onchange=属性，只需附加如下处理程序：

$(function () {
  $('select').on('change', function () {
    var action = $(this).closest('form').attr('action');
    alert(action);
  });
});

Example

Answer 3

您可以将元素作为参数传递：

＆＃13;

＆＃13;

function sortFunction(element){
   var action = $(element).closest('form').attr('action');
   alert(action);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="GET" name="FORM_TYPESH" action="xyz">
   <select name="nShip" onchange="sortFunction(this)">
     <option value="Any">Select Ship:</option>
     <option value="Any">Any</option>
   </select>
</form>

<form method="GET" name="FORM_TYPESH" action="abc">
   <select name="nShip" onchange="sortFunction(this)">
      <option value="Any">Select Ship:</option>
      <option value="Any">Any</option>
   </select>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 4

由于你调用一个全局函数，这个变量将引用窗口....我建议你在你的html中传递默认的事件变量并在你的函数中检索它，这样你就可以访问元素了。触发事件。

＆＃13;

＆＃13;

function sortFunction(e){
  
   var action = $(e.currentTarget).closest('form').attr('action');
   alert(action);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="GET" name="FORM_TYPESH" action="xyz">
   <select name="nShip" onchange="sortFunction(event)">
     <option value="Any">Select Ship:</option>
     <option value="Any">Any</option>
   </select>
</form>
<form method="GET" name="FORM_TYPESH" action="abc">
   <select name="nShip" onchange="sortFunction(event)">
      <option value="Any">Select Ship:</option>
      <option value="Any">Any</option>
   </select>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 5

Jquery为您提供on()功能。您可以在更改事件上获取表单的操作属性。

$(document).ready(function(){
  $('select').on('change', function () {
    var action = $(this).closest('form').attr('action');
    alert(action);
  });
});

Answer 6

如何将表单的id传递给函数：

<form method="GET" name="FORM_TYPESH" action="xyz" id="formOne">
   <select name="nShip" onchange="sortFunction('formOne')">
     <option value="Any">Select Ship:</option>
     <option value="Any">Any</option>
   </select>
</form>
<form method="GET" name="FORM_TYPESH" action="abc" id="formTwo">
   <select name="nShip" onchange="sortFunction('formTwo')">
      <option value="Any">Select Ship:</option>
      <option value="Any">Any</option>
   </select>
</form>
<script>
function sortFunction(formId){
   var action = $('#' + formId).closest('form').attr('action');
   alert(action);
}
</script>

Answer 7

试试这个

$(document).ready(function(){
  $('select').on('change', function () {
    var action = $(this).closest('form').attr('action');
    alert(action);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="GET" name="FORM_TYPESH" action="xyz">
  <select name="nShip">
     <option value="Any">Select Ship:</option>
     <option value="Any">Any</option>
   </select>
</form>
<form method="GET" name="FORM_TYPESH" action="abc">
  <select name="nShip">
      <option value="Any">Select Ship:</option>
      <option value="Any">Any</option>
   </select>
</form>