C# 使用Jquery从Textbox在Listbox中添加项

我被困在某处使用jquery从文本框中附加列表框

这是我的jquery

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

$（“#btnAddSvc”）。单击（函数（）{
var svc=$（“#”）.val（）；//它让您知道文本框的值
svc.附在（“#”）之后；
}); 

我正在使用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>

我无法获取列表框中的值，请有人帮忙。

jQuery选择器$（）在

“#”

中缺失，因此您将获得lstscname的

id

，而不是

对象

我还更改了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;
}); 

$（“#”）点击（函数（）{
var svc=$（“#”）.val（）；//它让您知道文本框的值
$（“#”）追加（'item'+svc+''）；
返回false；
}); 

编辑[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;
});

$（“#”）点击（函数（）{
var txt=$（“#”）；
var svc=$（txt）.val（）；//它让您知道文本框的值
var lst=$（“#”）的值；
var期权=$（“#期权”）；
var alreadyExist=false；
$（选项）。每个（函数（）{
if（$（this）.val（）==svc）{
警报（“项目已存在”）；
alreadyExist=真；
返回；
}
txt.val（“”）；
//警报（$（this.val（））；
});
如果（！alreadyExist）
$（lst）.append（“”+svc+“”）；
返回false；
});
您可以使用jquery操作DOM，但是现在有一种更优雅的方法：面向对象的方法（使用MVVM-Model-View-ViewModel），使用


只需将
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" />


$（函数（）{
var模型={
元素：ko.observearray（），
addElement:function（）{
this.elements.push（$（“#”）.val（）；
}
};
ko.应用绑定（模型）；
});



这是输出：

试试这样的方法。这可能对你有帮助。为方便起见，请更改返回值

   $('#<%= btnAddSvc.ClientID %>').click(function () {
            $textbox = $('#<%= txtServiceName.ClientID %>');
            $listbox = $('#<%= lstSvcName.ClientID %>');
            $listbox.append($('<option></option>').attr('value', $textbox.val()).text($textbox.val()));
            return false;
        });

$（'#'）。单击（函数（）{
$textbox=$（“#”）；
$listbox=$（“#”）；
$listbox.append（$（''）.attr（'value'，$textbox.val（））.text（$textbox.val（））；
返回false；
});
立即尝试，您在列表框中添加项目时使用了错误的语法，请立即选中，这也无法正常工作：（为什么你包含了5？5在这里的意思是什么？输入错误，我已经删除了，让我检查一下它为什么不工作。我不知道为什么不工作。你包含了jquery文件吗？并把这个脚本放在了正确的位置。做一些调试它应该可以工作。同时从答案中获取最新的代码，你可能没有最新的。他说这是我调试javascript的答案，可能会对您有所帮助。这非常感谢您的帮助：还需要一个帮助如何避免重复，并在删除击键时删除重复的内容？我担心延迟。这些天我无法联机。@PratikGupta，尝试类似的方法删除
$（'#'）。单击（函数（）{$listBox=$（“#”）；$selectedItem=$listBox.find（'option:selected'）；$selectedItem.remove（）；return false；}）
@PratikGupta，只需尝试这些代码行来检查重复的条目。我不确定这是否会起作用。请尝试修改一些行，然后再试。
$textbox=$（'（var i=0，j=selectObject.options.length；i