在ASP.NET中實現可編輯的DropDownList
[英]Implementing an editable DropDownList in ASP.NET
問題描述
在ASP.NET中實現DropDownList的最優雅的方法是什么，而無需使用第三方組件就可以進行編輯的最優雅的方法是什么。
作為最后的選擇，我可能會嘗試使用帶有AutoCompleteExtender的TextBox和圖像來“下拉”列表。 或將HTML Select與某些JavaScript重疊的TextBox ，以將Select中的值填充到TextBox 。 但是我真的希望有一個更簡潔和可維護的解決方案。
提前致謝。
3 個解決方案
解決方案1
5 2009-10-20 02:06:39
頁面上的一個控件
您可以按照
以下簡單示例來了解代碼項目上的可編輯DropDownlist，該項目
使用標准ASP.NET TextBox和DropDownList控件以及一些JavaScript。
但是，在我添加引用以獲取TextBox和DropDownList的ClientID值之前，代碼對我不起作用：
<script language="javascript" type="text/javascript">
function DisplayText()
{
var textboxId = '<% = txtDisplay.ClientID %>';
var comboBoxId = '<% = ddSelect.ClientID %>';
document.getElementById(textboxId).value = document.getElementById(comboBoxId).value;
document.getElementById(textboxId).focus();
}
</script>
<asp:TextBox style="width:120px;position:absolute" ID="txtDisplay" runat="server"></asp:TextBox>
<asp:DropDownList ID="ddSelect" style="width:140px" runat="server">
<asp:ListItem Value="test1" >test1</asp:ListItem>
<asp:ListItem Value="test2">test2</asp:ListItem>
</asp:DropDownList>
最后，在后面的代碼中，就像在原始示例中一樣，我在頁面加載中添加了以下內容：
protected void Page_Load(object sender, EventArgs e)
{
ddSelect.Attributes.Add("onChange", "DisplayText();");
}
頁面上的多個控件
我將以上所有代碼放在自己的ASCX用戶控件中，以使其在我的項目中可重復使用。 但是，只有在給定頁面上僅需要一個可編輯的DropDownList時，上述代碼才有效。
如果需要在單個頁面上支持多個自定義DropDownList控件，則必須將JavaScript函數名稱設置為唯一以避免沖突。 再次使用ClientID執行此操作：
在ASCX文件中：
function DisplayText_<% = ClientID %>(){...}
在后面的代碼中：
/// ...
ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();");
///..
這是避免使用第三方控件的一種方法。
解決方案2
1 2017-03-03 09:01:28
您可以嘗試使用JqueryUI自動完成組合框。
它將允許您輸入文本以及從下拉菜單中選擇所需的項目。
作為一項附加功能，它使您可以使用自動完成功能來獲得增強的UI體驗。
我正在附上一個與Bootstrap 3.3.4結合的演示
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="https://jqueryui.com/resources/demos/style.css" rel="stylesheet" /> <style> .custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; } .custom-combobox-input { margin: 0; padding: 5px 10px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #421D1D; background: #ffffff url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x !important; font-weight: normal; color: #555555; } /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0px !important; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0px !important; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0px !important; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0px !important; } </style> <script> (function($) { $.widget("custom.combobox", { _create: function() { this.wrapper = $("<span>") .addClass("custom-combobox") .insertAfter(this.element); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children(":selected"), value = selected.val() ? selected.text() : ""; this.input = $("<input>") .appendTo(this.wrapper) .val(value) .attr("title", "") .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ delay: 0, minLength: 0, source: $.proxy(this, "_source") }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on(this.input, { autocompleteselect: function(event, ui) { ui.item.option.selected = true; this._trigger("select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $("<a>") .attr("tabIndex", -1) .attr("title", "Show All Items") .tooltip() .appendTo(this.wrapper) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("custom-combobox-toggle ui-corner-right") .mousedown(function() { wasOpen = input.autocomplete("widget").is(":visible"); }) .click(function() { input.focus(); // Close if already visible if (wasOpen) { return; } // Pass empty string as value to search for, displaying all results input.autocomplete("search", ""); }); }, _source: function(request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response(this.element.children("option").map(function() { var text = $(this).text(); if (this.value && (!request.term || matcher.test(text))) return { label: text, value: text, option: this }; })); }, _removeIfInvalid: function(event, ui) { // Selected an item, nothing to do if (ui.item) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children("option").each(function() { if ($(this).text().toLowerCase() === valueLowerCase) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if (valid) { return; } // Remove invalid value this.input .val("") .attr("title", value + " didn't match any item") .tooltip("open"); this.element.val(""); this._delay(function() { this.input.tooltip("close").attr("title", ""); }, 2500); this.input.autocomplete("instance").term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); })(jQuery); $(function() { $("#combobox").combobox(); $("#toggle").click(function() { $("#combobox").toggle(); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div class="ui-widget"> <select id="combobox" class="form-control"> <option value="">Select your option</option> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value="Cherry">Cherry</option> <option value="Date">Date</option> <option value="Fig">Fig</option> <option value="Grape">Grape</option> <option value="Kiwi">Kiwi</option> <option value="Mango">Mango</option> <option value="Orange">Orange</option> <option value="Pumpkin">Pumpkin</option> <option value="Strawberry">Strawberry</option> <option value="Tomato">Tomato</option> <option value="Watermelon">Watermelon</option> </select> </div> </div> </form> </body> </html>
Chrome瀏覽器版本43.0.2334.0 dev-m（64位）
Internet Explorer 11
Firefox 36.0.1
Visual Studio 2013版
希望這能解決您的問題。
解決方案3
1 2011-02-10 18:38:41
這里的2解決方案對我有用。 所以雷是koodos。
此外，您還應該查看http://ajaxcontroltoolkit.codeplex.com/releases/view/43475 ，它是ajaxcontroltoolkit。
我認為框架4的版本不帶有comboBox組件，該組件位於此處： http : //www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx ，非常酷。 特別是如果您這樣設置：
ajaxToolkit:ComboBox ID=ComboBox1 runat=server AutoPostBack=False
DropDownStyle=DropDown AutoCompleteMode=Suggest
CaseSensitive=False ItemInsertLocation="OrdinalText"
在ASP.NET DetailsView模板控件中實現級聯DropDownList綁定
[英]Implementing cascading DropDownList binding in a asp.net detailsview templated control
從viewModel在Asp.net MVC 3上實現Dropdownlist
[英]Implementing Dropdownlist on Asp.net MVC 3 from viewModel
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.