javascript - 使用 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 --> 当前元素
• 事件 --> 事件对象

因此，更改您的代码:

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

到:

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

片段:

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

<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>