以下代码使用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代码,请告诉我。
为什么不将普通的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()
绑定处理程序,而不是在字段上使用两者。