有没有办法将字符串参数传递给 jQuery 函数，以便我可以为多个 DropDownLists 重用一个脚本函数？答案

【问题标题】：Is there a way to pass a string parameter to a jQuery function so I can reuse one script function for multiple DropDownLists?有没有办法将字符串参数传递给 jQuery 函数，以便我可以为多个 DropDownLists 重用一个脚本函数？
【发布时间】：2018-06-14 04:04:46
【问题描述】：

以下代码使用 onChange 事件根据 NameOpDdl 和 AddressOpDdl 的结果更改显示的其他字段。此代码有效。

<script type="text/javascript">
    $(function () {
        var jqDdl = $('#NameOpDdl'), onChange = function (event) {
                if ($(this).val() === '1') { // Null opperator
                    $('.form-field.NameOp-field').css('width', '100%') //Combines .form-field and .NameOp-field. Replaces .form-field entire 'width' of 100% and changes this individual column 'width' to this percentage.
                    $('.form-field.NameSel-field').css('width', '0%')
                    $('.form-field.NameSelBtwn-field').css('width', '0%')
                    $('.form-field.NameIn-field').css('width', '0%')
                    $('#NameSelDdlLbl').hide();
                    $('#NameSelDdl').hide().val('');
                    $('#NameSelBtwnDdlLbl').hide();
                    $('#NameSelBtwnDdl').hide().val('');
                    $('#NameInTbLbl').hide();
                    $('#NameInTb').hide().val('');
                } else if ($(this).val() === '10') { // In opperator
                    $('.form-field.NameOp-field').css('width', '20%')
                    $('.form-field.NameSel-field').css('width', '0%')
                    $('.form-field.NameSelBtwn-field').css('width', '0%')
                    $('.form-field.NameIn-field').css('width', '80%')
                    $('#NameSelDdlLbl').hide();
                    $('#NameSelDdl').hide().val('');
                    $('#NameSelBtwnDdlLbl').hide();
                    $('#NameSelBtwnDdl').hide().val('');
                    $('#NameInTbLbl').show();
                    $('#NameInTb').show();
                    $('#NameInTb').focus().select();
                } else if ($(this).val() === '11') { // Between opperator
                    $('.form-field.NameOp-field').css('width', '30%')
                    $('.form-field.NameSel-field').css('width', '35%')
                    $('.form-field.NameSelBtwn-field').css('width', '35%')
                    $('.form-field.NameIn-field').css('width', '0%')
                    $('#NameInTbLbl').hide();
                    $('#NameInTb').hide().val('');
                    $('#NameSelDdlLbl').show();
                    $('#NameSelDdl').show();
                    $('#NameSelBtwnDdlLbl').show();
                    $('#NameSelBtwnDdl').show();
                    $('#NameSelDdl').focus().select();
                } else {// All other opperators
                    $('.form-field.NameOp-field').css('width', '25%')
                    $('.form-field.NameSel-field').css('width', '75%')
                    $('.form-field.NameSelBtwn-field').css('width', '0%')
                    $('.form-field.NameIn-field').css('width', '0%')
                    $('#NameSelBtwnDdlLbl').hide();
                    $('#NameSelBtwnDdl').hide().val('');
                    $('#NameInTbLbl').hide();
                    $('#NameInTb').hide().val('');
                    $('#NameSelDdlLbl').show();
                    $('#NameSelDdl').show();
                    //$('#NameSelDdl').focus().select();
                }
            };
        onChange.apply(jqDdl.get(0));
        jqDdl.change(onChange);
    });
</script>
<script type="text/javascript">
    $(function () {
        var jqDdl = $('#AddressOpDdl'), onChange = function (event) {
            if ($(this).val() === '1') { // Null opperator
                $('.form-field.AddressOp-field').css('width', '100%') //Combines .form-field and .AddressOp-field. Replaces .form-field entire 'width' of 100% and changes this individual column 'width' to this percentage.
                $('.form-field.AddressSel-field').css('width', '0%')
                $('.form-field.AddressSelBtwn-field').css('width', '0%')
                $('.form-field.AddressIn-field').css('width', '0%')
                $('#AddressSelDdlLbl').hide();
                $('#AddressSelDdl').hide().val('');
                $('#AddressSelBtwnDdlLbl').hide();
                $('#AddressSelBtwnDdl').hide().val('');
                $('#AddressInTbLbl').hide();
                $('#AddressInTb').hide().val('');
            } else if ($(this).val() === '10') { // In opperator
                $('.form-field.AddressOp-field').css('width', '20%')
                $('.form-field.AddressSel-field').css('width', '0%')
                $('.form-field.AddressSelBtwn-field').css('width', '0%')
                $('.form-field.AddressIn-field').css('width', '80%')
                $('#AddressSelDdlLbl').hide();
                $('#AddressSelDdl').hide().val('');
                $('#AddressSelBtwnDdlLbl').hide();
                $('#AddressSelBtwnDdl').hide().val('');
                $('#AddressInTbLbl').show();
                $('#AddressInTb').show();
                $('#AddressInTb').focus().select();
            } else if ($(this).val() === '11') { // Between opperator
                $('.form-field.AddressOp-field').css('width', '30%')
                $('.form-field.AddressSel-field').css('width', '35%')
                $('.form-field.AddressSelBtwn-field').css('width', '35%')
                $('.form-field.AddressIn-field').css('width', '0%')
                $('#AddressInTbLbl').hide();
                $('#AddressInTb').hide().val('');
                $('#AddressSelDdlLbl').show();
                $('#AddressSelDdl').show();
                $('#AddressSelBtwnDdlLbl').show();
                $('#AddressSelBtwnDdl').show();
                $('#AddressSelDdl').focus().select();
            } else {// All other opperators
                $('.form-field.AddressOp-field').css('width', '25%')
                $('.form-field.AddressSel-field').css('width', '75%')
                $('.form-field.AddressSelBtwn-field').css('width', '0%')
                $('.form-field.AddressIn-field').css('width', '0%')
                $('#AddressSelBtwnDdlLbl').hide();
                $('#AddressSelBtwnDdl').hide().val('');
                $('#AddressInTbLbl').hide();
                $('#AddressInTb').hide().val('');
                $('#AddressSelDdlLbl').show();
                $('#AddressSelDdl').show();
                //$('#AddressSelDdl').focus().select();
            }
        };
        onChange.apply(jqDdl.get(0));
        jqDdl.change(onChange);
    });
</script>
</head>
<body>
<form id="Pufrm" runat="server">
    <section id="mid-left" class="floating-labels-form">
        <div class="form-row">
            <span class="form-field bg-color NameOp-field">
                <asp:Label ID="NameOpDdlLbl" class="op-lbl top-label" runat="server" Text="Name Operators"></asp:Label>
                <asp:DropDownList ID="NameOpDdl" class="op-ddl top-label-textbox" required="" runat="server">
                    <asp:ListItem Enabled="true" Selected="false" Text="Select Operator" Value="1"></asp:ListItem>
                    <asp:ListItem Text="" Selected="true" Value="1"></asp:ListItem>
                    <asp:ListItem Text="LIKE" Value="2"></asp:ListItem>
                    <asp:ListItem Text="NOT LIKE" Value="3"></asp:ListItem>
                    <asp:ListItem Text=">" Value="4"></asp:ListItem>
                    <asp:ListItem Text=">=" Value="5"></asp:ListItem>
                    <asp:ListItem Text="<" Value="6"></asp:ListItem>
                    <asp:ListItem Text="<=" Value="7"></asp:ListItem>
                    <asp:ListItem Text="=" Value="8"></asp:ListItem>
                    <asp:ListItem Text="<>" Value="9"></asp:ListItem>
                    <asp:ListItem Text="IN" Value="10"></asp:ListItem>
                    <asp:ListItem Text="BETWEEN" Value="11"></asp:ListItem>
                    <asp:ListItem Text="Starts With" Value="12"></asp:ListItem>
                    <asp:ListItem Text="Ends With" Value="13"></asp:ListItem>
                    <asp:ListItem Text="Contains" Value="14"></asp:ListItem>
                    <asp:ListItem Text="Not Starts With" Value="15"></asp:ListItem>
                    <asp:ListItem Text="Not Ends With" Value="16"></asp:ListItem>
                    <asp:ListItem Text="Not Contains" Value="17"></asp:ListItem>
                </asp:DropDownList>
            </span>
            <span class="form-field bg-color NameSel-field">
                <asp:Label ID="NameSelDdlLbl" class="sel-lbl top-label" runat="server" Text="Name"></asp:Label>
                <asp:DropDownList ID="NameSelDdl" class="sel-ddl top-label-textbox" required="" runat="server"></asp:DropDownList>
            </span>
            <span class="form-field bg-color NameSelBtwn-field">
                <asp:Label ID="NameSelBtwnDdlLbl" class="btwn-lbl top-label" runat="server" Text="And Name"></asp:Label>
                <asp:DropDownList ID="NameSelBtwnDdl" class="btwn-ddl top-label-textbox" required="" runat="server"></asp:DropDownList>
            </span>
            <span class="form-field bg-color NameIn-field">
                <asp:Label ID="NameInTbLbl" class="in-lbl top-label" runat="server" Text="Name In" Visible="true"></asp:Label>
                <asp:TextBox ID="NameInTb" class="in-tb top-label-textbox" Visible="true" runat="server"></asp:TextBox>
            </span>
        </div>
    </section>
    <section id="mid-center" class="floating-labels-form">
        <div class="form-row">
            <span class="form-field bg-color AddressOp-field">
                <asp:Label ID="AddressOpDdlLbl" class="op-lbl top-label" runat="server" Text="Address Operators"></asp:Label>
                <asp:DropDownList ID="AddressOpDdl" class="op-ddl top-label-textbox" required="" runat="server">
                    <asp:ListItem Enabled="true" Selected="false" Text="Select Operator" Value="1"></asp:ListItem>
                    <asp:ListItem Text="" Selected="true" Value="1"></asp:ListItem>
                    <asp:ListItem Text="LIKE" Value="2"></asp:ListItem>
                    <asp:ListItem Text="NOT LIKE" Value="3"></asp:ListItem>
                    <asp:ListItem Text=">" Value="4"></asp:ListItem>
                    <asp:ListItem Text=">=" Value="5"></asp:ListItem>
                    <asp:ListItem Text="<" Value="6"></asp:ListItem>
                    <asp:ListItem Text="<=" Value="7"></asp:ListItem>
                    <asp:ListItem Text="=" Value="8"></asp:ListItem>
                    <asp:ListItem Text="<>" Value="9"></asp:ListItem>
                    <asp:ListItem Text="IN" Value="10"></asp:ListItem>
                    <asp:ListItem Text="BETWEEN" Value="11"></asp:ListItem>
                    <asp:ListItem Text="Starts With" Value="12"></asp:ListItem>
                    <asp:ListItem Text="Ends With" Value="13"></asp:ListItem>
                    <asp:ListItem Text="Contains" Value="14"></asp:ListItem>
                    <asp:ListItem Text="Not Starts With" Value="15"></asp:ListItem>
                    <asp:ListItem Text="Not Ends With" Value="16"></asp:ListItem>
                    <asp:ListItem Text="Not Contains" Value="17"></asp:ListItem>
                </asp:DropDownList>
            </span>
            <span class="form-field bg-color AddressSel-field">
                <asp:Label ID="AddressSelDdlLbl" class="sel-lbl top-label" runat="server" Text="Address"></asp:Label>
                <asp:DropDownList ID="AddressSelDdl" class="sel-ddl top-label-textbox" required="" runat="server"></asp:DropDownList>
            </span>
            <span class="form-field bg-color AddressSelBtwn-field">
                <asp:Label ID="AddressSelBtwnDdlLbl" class="btwn-lbl top-label" runat="server" Text="And Address"></asp:Label>
                <asp:DropDownList ID="AddressSelBtwnDdl" class="btwn-ddl top-label-textbox" required="" runat="server"></asp:DropDownList>
            </span>
            <span class="form-field bg-color AddressIn-field">
                <asp:Label ID="AddressInTbLbl" class="in-lbl top-label" runat="server" Text="Address In" Visible="true"></asp:Label>
                <asp:TextBox ID="AddressInTb" class="in-tb top-label-textbox" Visible="true" runat="server"></asp:TextBox>
            </span>
        </div>
    </section>
</form>
</body>
</html>

但是，除了这两个字段之外，我还需要在同一个网页上为大约 15 个其他字段重复相同的脚本和相同的 html 代码。有没有办法将字符串参数传递给 jQuery 函数，以便我可以为多个 DropDownLists 重用一个脚本函数？比如：

$(function (fieldName as string) {
    var jqDdl = $('#' + fieldname + 'OpDdl'), onChange = function (event) {
            if ($(this).val() === '1') { // Null operator
                $('.form-field.' + fieldname + 'Op-field').css('width', '100%')...

然后从 HTML 代码中调用该函数？比如：

<asp:DropDownList ID="NameOpDdl" ... onChange="function ('Name')">
or
<asp:DropDownList ID="NameOpDdl" ... onChange="function ('Address')">

如果还有整合 HTML 代码的方法，请告诉我。

【问题讨论】：

标签： javascript jquery html asp.net onchange

【解决方案1】：

为什么不将普通的 JS 函数与 JQuery 结合使用？

喜欢：

function handleDropdownChange(obj, additionalParameter)
{
  var $obj= $(obj);
  // your function code i.e.
  if ($obj.val() === "10") {
    // just a sample: hide the additionally passed element on value 10
    $('#'+additionalParameter).hide();
  }
}

并使用它类似于您发布的代码：

<asp:DropDownList ID="NameOpDdl" ... onChange="handleDropdownChange(this, 'Address')">

另说：

您应该在字段上使用onChange 或将处理程序与.onChange() 绑定，而不是在字段上同时使用。

【讨论】：