javascript 使用 Jquery 从文本框添加列表框中的项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11358807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Jquery to add items in Listbox from Textbox
提问by Pratik
I am stuck somewhere using jquery to append the list box from a text box.
我被困在某个地方，使用 jquery 从文本框中附加列表框。
here is my jquery
这是我的 jquery
$("#btnAddSvc").click(function () {
var svc = $("#<%= txtServiceName.ClientID %>").val(); //Its Let you know the textbox's value
svc.appendTo("#<%=lstSvcName.ClientID %>");
});
I am using asp.net (c#) to develop my code
我正在使用 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>
can someone please help as i am not able to get the values in list box.
有人可以帮忙，因为我无法获取列表框中的值。
回答by Adil
The jQuery selector $() is missing for "#<%=lstSvcName.ClientID %>"so you will get idof lstSvcName instead of object.
缺少 jQuery 选择器 $()，"#<%=lstSvcName.ClientID %>"因此您将获得idlstSvcName 而不是object.
I also changed the append statement as it does not have correct syntax.
我还更改了 append 语句，因为它没有正确的语法。
"#<%=lstSvcName.ClientID %>"
would be
将是
$("#<%=lstSvcName.ClientID %>")
Your code will become
您的代码将成为
$("#<%= 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 [ More functionality requested by OP for unique items in ListBox and clearing TextBox]
编辑 [OP 为 ListBox 中的唯一项目请求更多功能并清除 TextBox]
$("#<%= 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;
});
回答by Jupaol
You could do it using jquery manipulating the DOM but... Now there's a more elegant way to do it: an object-oriented way (using a MVVM - Model View ViewModel), using knockoutjs
您可以使用 jquery 操作 DOM 但...现在有一种更优雅的方法来做到这一点：面向对象的方式（使用 MVVM - 模型视图 ViewModel），使用knockoutjs
You create a binding to your list just adding data-bind="options: elements"to your list, and you are always working with objects, never with DOM elements, in this example I have a string array but you can create custom objects and bind them using just a little variation in the syntax
你创建一个绑定到你的列表只是添加data-bind="options: elements"到你的列表中，你总是使用对象，从不使用 DOM 元素，在这个例子中我有一个字符串数组，但你可以创建自定义对象并使用一些变化来绑定它们句法
The way to do it is:
这样做的方法是：
<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" />
This is the output:
这是输出：
回答by Raaghav
Try something like this. This may help you. Change the return value for your convenience.
尝试这样的事情。这可能对你有帮助。为方便起见，更改返回值。
$('#<%= btnAddSvc.ClientID %>').click(function () {
$textbox = $('#<%= txtServiceName.ClientID %>');
$listbox = $('#<%= lstSvcName.ClientID %>');
$listbox.append($('<option></option>').attr('value', $textbox.val()).text($textbox.val()));
return false;
});
