4

テキストボックスからリストボックスを追加するためにjqueryを使用してどこかで立ち往生しています。

これが私のjqueryです

  $("#btnAddSvc").click(function () {
        var svc = $("#<%= txtServiceName.ClientID %>").val();  //Its Let you know the textbox's value   
        svc.appendTo("#<%=lstSvcName.ClientID %>");
    });

コードの開発にasp.net（c＃）を使用しています

<asp:Button ID="btnAddSvc" runat="server" Text=">>" Font-Size="Medium" />
<asp:ListBox ID="lstSvcName" runat="server" SelectionMode="Multiple" ToolTip="Selected Service Names"
                Width="169px"></asp:ListBox>

リストボックスの値を取得できないので、誰か助けてもらえますか。

4

3 に答える 3

7

の jQuery セレクター $() がないため、の代わりに lstSvcName"#<%=lstSvcName.ClientID %>"を取得します。idobject

構文が正しくないため、append ステートメントも変更しました。

"#<%=lstSvcName.ClientID %>"

だろう

$("#<%=lstSvcName.ClientID %>")

あなたのコードは

$("#<%= btnAddSvc.ClientID %>").click(function () {
      var svc = $("#<%= txtServiceName.ClientID %>").val();  //Its Let you know the textbox's value   
      $("#<%=lstSvcName.ClientID %>").append('<option value="'+svc+'">item '+svc+'</option>');
      return false;
});

EDIT [ListBoxの一意のアイテムとTextBoxのクリアに対してOPが要求する機能の追加]

$("#<%= btnAddSvc.ClientID %>").click(function () {
    var txt = $("#<%= txtServiceName.ClientID %>");
    var svc = $(txt).val();  //Its Let you know the textbox's value   
    var lst = $("#<%=lstSvcName.ClientID %>");
    var options = $("#<%=lstSvcName.ClientID %> option");
    var alreadyExist = false;
    $(options).each(function () {
        if ($(this).val() == svc) {
            alert("Item alread exists");
            alreadyExist = true;
            return;
        }
        txt.val("");
        // alert($(this).val());
    });
    if(!alreadyExist)
            $(lst).append('<option value="' + svc + '">' + svc + '</option>');
    return false;
});
于 2012-07-06T08:49:38.460 に答える
1

DOM を操作する jquery を使用してそれを行うこともできますが、より洗練された方法があります: オブジェクト指向の方法 (MVVM - Model View ViewModel を使用)、knockoutjsを使用

Knockoutjs Nuget パッケージ

リストに追加するだけでリストへのバインディングを作成し、data-bind="options: elements"DOM 要素ではなく常にオブジェクトを操作します。この例では文字列配列を使用していますが、カスタム オブジェクトを作成し、構文

それを行う方法は次のとおりです。

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script>
<script type="text/javascript">
    $(function () {
        var model = {
            elements: ko.observableArray(),
            addElement: function () {
                this.elements.push($("#<%= this.newElement.ClientID %>").val());
            }
        };

        ko.applyBindings(model);
    });
</script>


    <asp:ListBox runat="server" ID="myListbox" Rows="10" Width="25%" data-bind="options: elements">
    </asp:ListBox>
    <br />
    <asp:TextBox runat="server" ID="newElement"></asp:TextBox>
    <input type="button" id="addElement" value="Add element" data-bind="click: addElement" />

これは出力です：

ここに画像の説明を入力

于 2012-07-06T09:07:38.873 に答える
1

このようなことを試してください。これはあなたを助けるかもしれません。便宜上、戻り値を変更します。

   $('#<%= btnAddSvc.ClientID %>').click(function () {
            $textbox = $('#<%= txtServiceName.ClientID %>');
            $listbox = $('#<%= lstSvcName.ClientID %>');
            $listbox.append($('<option></option>').attr('value', $textbox.val()).text($textbox.val()));
            return false;
        });
于 2012-07-06T09:08:20.747 に答える