文章源自：http://viralpatel.net/blogs/dynamic-combobox-listbox-drop-down-using-javascript/
Dynamic combobox-listbox-drop-down using javascript
Want to populate dynamically combobox-listbox-drop-down using javascript? Let us see a very simple script to do this. First let us see createElement() of document object in javascript.
//Create a table element dynamically
var table = document.createElement("table");
//Create a select element dynamically
var select = document.createElement("select");
//Create a option element dynamically
var option = document.createElement("option");
Thus, createElement method takes a parameter which is the string that specifies the name for the element node and returns the element node.
Let us see how can we populate a dropdown or combobox using this method. Following is the html file of our example:
<HTML>
<HEAD>
<TITLE>Dynamically populating drop down, combobox, list box using JavaScript</TITLE>
<SCRIPT language="javascript" src="config.js"></SCRIPT>
</HEAD>
<BODY style="font-family: sans-serif">
<fieldset>
<legend>Combo box</legend>
Add to Combo: <input type="text" name="txtCombo" id="txtCombo"/>
<input type="button" value="Add" onclick="addCombo()">
<br/>
Combobox: <select name="combo" id="combo"></select>
</fieldset>
</BODY>
</HTML>
And following is the javascript file:
function addCombo() {
var textb = document.getElementById("txtCombo");
var combo = document.getElementById("combo");
var option = document.createElement("option");
option.text = textb.value;
option.value = textb.value;
try {
combo.add(option, null); //Standard
}catch(error) {
combo.add(option); // IE only
}
textb.value = "";
}
Thus, when we provide a value in text box and click the Add button, a new option element is created using document.createElement method. The attributes of the option element are set using the method .setAttribute(). And finally the option is added to combo using .add() method.
相关推荐
在实际项目中，我们常常需要在DataGrid的列中嵌入其他控件，如ComboBox和ListBox，以便提供更丰富的用户交互。这个压缩包中的例子正是展示了如何在DataGrid中绑定这两个控件并获取其值的源码实现。 首先，让我们...
本实例——"Color-drop-down-box.rar_drop"——是一个为初学者设计的教程，它展示了如何在VC++中实现一个简单的颜色选择下拉框。 颜色下拉框通常是一个组合框（ComboBox），用户可以在其中选择预定义的颜色或者输入...
在标题“vb捕获combobox-edit-内容”中，重点是捕获用户在`ComboBox`编辑区（即文本框部分）输入的内容。这通常涉及到事件处理和数据验证。 `ComboBox`控件有两种模式：简单模式和下拉列表模式。在简单模式下，用户...
本话题主要探讨如何利用Combobox和ListBox这两个控件来解决检索问题，以及如何自定义控件以适应特定需求。 Combobox（组合框）和ListBox（列表框）是Windows Forms和WPF等UI框架中常见的控件，它们在用户界面设计中...
在C#的Windows Forms应用程序开发中，`ComboBox`和`ListBox`是两个常用的控件，它们用于展示下拉列表供用户选择。`ComboBox`通常用于显示一个文本输入框和一个下拉列表，而`ListBox`则只显示一个列表。这两个控件在...
在编程领域，尤其是在Windows应用程序开发中，`ComboBox`和`ListBox`是两种常见的控件，它们用于用户界面中提供下拉列表或多项选择的功能。在本文中，我们将深入探讨这两个控件如何处理和使用内码，以及它们在实际...
### 常用控件的使用（Button、TextBox、ComboBox、ListBox等） #### 控件概述 在Visual Basic.NET (简称VB.NET) 开发环境中，创建一个功能丰富的用户界面（UI）至关重要。为了实现这一目标，VB.NET 提供了一系列...
This ComboBox is an ASP.NET 2.0 AJAX Server Control. Please find out functional list in latest release note.This ComboBox is an ASP.NET 2.0 AJAX Server Control. Please find out functional list in ...
在VB.NET编程环境中，ComboBox和ListBox是两种常用的控件，它们在用户界面设计中起着至关重要的作用。本文将深入探讨这两个控件的功能、用法以及它们在实际应用中的实例。 ComboBox控件，中文通常称为下拉框或组合...
在iOS开发中，创建用户友好的交互界面是至关重要的，其中一种常见的元素是下拉菜单，也称为ComboBox或Dropdown。本教程将详细讲解如何利用UITableView实现一个可扩展的下拉菜单效果，适用于iPhone、iPad以及iPod设备...
WCF的主体资源，整理了很多风格 项目描述： WPF Themes 是应用在WPF项目中的免费主题。 支持的控件： -Button -ToggleButton ...-ComboBox -ListBox -ProgressBar -Slider -TreeView -Expander
jquery-simple-combobox, 一个jQuery组合框( selectbox ) 插件 jQuery简单组合插件插件一个 jQuery combobox插件你可以将它用于自动完成( 搜索等) 。用法你可以在 index.html 中找到引用，并在这里查看 fiddles，以...
62、如何事先选定 ListBox 或 ComboBox 的某一个 Item？ 63、模拟 IE 的 地址栏：智慧型下拉式 Combo 64、如何让 ListBox 同一列显示二栏以上的栏位？ 65、如何控制二栏以上 ListBox 之各栏位宽度？ 66、ListBox ...
- Combobox - ListView - TileView - TreeView - DirectoryTreeView * - FileListView * Widgets can be generated for the your custom type with context menu "Create / New UI Widgets / Generate Widgets" ...
然后，你需要引入Combobox的CSS和JS文件，通常它们位于`bootstrap-combobox-master/dist`目录下。接着，对HTML元素应用`combobox`类，并通过`data-toggle="combobox"`属性激活插件功能。例如： ```html ...
QString selectedItem = comboBox->itemText(index); // 在这里处理选择变化的逻辑 } ``` 此外，`QComboBox`还支持从模型（如`QStringList`或`QStandardItemModel`）加载数据，这在处理大量数据时特别有用： ```...
VB2008 ListBox 和 ComboBox 控件的使用方法 VB2008 中的 ListBox 和 ComboBox 控件是两个常用的控件，用于在用户界面中显示列表项。ListBox 控件允许用户选择多个项，而 ComboBox 控件是文本框和列表框的组合。...
Web控件DropDownList和WinForm控件ComboBox机制不一样。 ComboBox没有对应的ListItem需要自己写一个： ... /// 选择项类，用于ComboBox或者ListBox添加项 /// public class ListItem { private string id
本压缩包“C#自定义控件--美化ComboBox源码--201903”可能包含一个自定义的ComboBox控件，旨在提升应用程序的视觉效果和用户体验。 自定义控件通常是开发者为了满足特定需求，对系统默认控件进行扩展和美化。在C#中...