[英]Textbox show/hide on button click and dropdown fill
I am making an functionality where on click of button a textbox should appear, and whatever the user fills the value , it should automatically gets updated in that dropdown. 我正在做一个功能,当单击按钮时,将出现一个文本框,无论用户填写什么值,它都应该在该下拉列表中自动更新。 I tried with the below mentioned code, where I am hiding/showing the textbox but unable to fill the dropdown:
我尝试使用下面提到的代码,在其中隐藏/显示文本框,但无法填充下拉列表:
<script type="text/javascript">
$(document).ready(function () {
$('#ctl00_ContentPlaceHolder1_txtOtherBusiness').hide();
$("#ctl00_ContentPlaceHolder1_btnbusinessAdd").click(function () {
$('#ctl00_ContentPlaceHolder1_txtOtherBusiness').show();
});
$("#ctl00_ContentPlaceHolder1_btnbusinessAdd").click(function () {
$('#ctl00_ContentPlaceHolder1_txtOtherBusiness').hide();
});
})
</script>
Also see the html for dropdown, textbox and button :- 另请参见html的下拉列表,文本框和按钮:-
<td>
<asp:DropDownList CssClass="txtfld-popup" ID="ddlBusinessUnit" runat="server"></asp:DropDownList>
<asp:Button ID="btnbusinessAdd" runat="server" Width="63" Text="Add" CausesValidation="false"/>
<asp:TextBox ID="txtOtherBusiness" runat="server" Visible="true" CssClass="txtfld-popup" CausesValidation="false"></asp:TextBox>
<asp:RequiredFieldValidator CssClass="error_msg" ID="reqBusinessUnit" ControlToValidate="ddlBusinessUnit" runat="server" ErrorMessage="Please enter business unit" InitialValue="--Select--" SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
for adding value and text to drop down 用于增加价值和文本下拉
EDIT: edited the visibility condition 编辑:编辑可见性条件
$(document).ready(function () {
$('#txtOtherBusiness').hide();
$('#btnbusinessAdd').click(function () {
if ($('#txtOtherBusiness').is(':visible')) {
var text = $('#txtOtherBusiness').val();
var dropDown = $('#ddlBusinessUnit');
var text = $('#txtOtherBusiness').val();
var itemVal = 1; // some value for option
var newItem = $('<option/>').val(itemVal).text(text).appendTo(dropDown);
$('#txtOtherBusiness').hide();
}
else {
$('#txtOtherBusiness').show();
}
});
});
Simply Use .toggle()
in jquery 只需在jquery中使用
.toggle()
$("#ctl00_ContentPlaceHolder1_btnbusinessAdd").click(function (event) {
event.preventDefault();
$('#ctl00_ContentPlaceHolder1_txtOtherBusiness').toggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.