Question

我正在制作一个功能，点击按钮时应该出现一个文本框，无论用户填写什么值，它都应该自动在该下拉列表中更新。我尝试使用下面提到的代码，我隐藏/显示文本框但无法填充下拉列表：

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

另见html for dropdown，textbox和button： -

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

Answer 1

用于添加值和文本以下拉

编辑：编辑了能见度条件

$(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();
            }
        });
    });

Answer 2

只需在jquery中使用.toggle()

$("#ctl00_ContentPlaceHolder1_btnbusinessAdd").click(function (event) {
            event.preventDefault();
            $('#ctl00_ContentPlaceHolder1_txtOtherBusiness').toggle();
 });

按钮单击和下拉填充上的文本框显示/隐藏

2 个答案: