`

下拉框——Dynamic options

阅读更多
这是一个简单的使用实例:

<form name="testform">
<select name="testselect">
	<option value="first">first option</option>
	<option value="second">second option</option>
	<option value="third">third option</option>
	<option>your browser can't handle this script</option>
</select>
</form>


用下面的代码可以访问到下拉框中选项:
// 得到选项对象
document.forms['testform'].testselect.options[i]


i是你想访问的option的序号。记住第一个选项对象是options[0],第二个是options[1],以此类推。如果你想删除option,如下:

document.forms['testform'].testselect.options[i] = null;


把这个选项对象标志为null,这个选项就完全从列表中删除了。
注意:这个操作会影响option的数量。假设在上面的实例中,你删除了option[1] ,原来的option[2] 元素('Third option')会变成option[1] 元素(option元素按照先后顺序顶上去)。
创建一个新的option,如下:

document.forms['testform'].testselect.options[i] = new Option('new text','new value');


用户在页面中看到option显示的文本和value值是这个option的VALUE 属性。
当表单提交时,VALUE 值传递到WEB服务器。
如果想要全部清空 select box 中的options, 如下:

document.forms['testform'].testselect.options.length = 0;
分享到:
评论

相关推荐

    可以输入的下拉框 下拉框和文本框组合共用

    可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...

    js多选下拉框多选下拉框多选下拉框

    我们可以使用`document.getElementById`来获取特定ID的元素,然后通过`options`属性访问下拉框中的所有选项。 例如,要获取所有选项并遍历它们: ```javascript var selectBox = document.getElementById('...

    酷炫下拉框(自行实现,3d翻转效果)

    【酷炫下拉框——HTML5 3D翻转效果实现详解】 在Web开发中,下拉框(Dropdown)是一种常见的交互元素,用于提供多个可选项目供用户选择。传统下拉框通常以二维的方式展示选项,而"酷炫下拉框(自行实现,3d翻转效果...

    使用JavaScript实现下拉框的动态控制

    - 通过将下拉框对象的`options.length`属性设置为0,可以清空下拉框的所有选项。 2. **动态增加一个选项** - 创建新的`&lt;option&gt;`节点,设置其值(`value`)和文本(`text`),然后将其插入到下拉框中指定的位置或...

    6种样式的下拉框

    在网页设计和开发中,下拉框(Dropdown)是一种常见的用户界面元素,它允许用户从一组预定义的选项中选择一个。"6种样式的下拉框"项目提供了多种不同风格和效果的下拉框解决方案,旨在提升用户体验并增强网站的视觉...

    下拉框值触发另一个下拉框

    "下拉框值触发另一个下拉框"这个功能就是一种常见的交互设计,通常应用于表单或者数据选择场景。这样的设计能够帮助用户根据前一个选择来过滤或定制后一个选项,从而简化操作流程。 首先,我们来理解下拉框...

    很漂亮的 下拉框

    "很漂亮的下拉框"这个标题暗示了我们即将探讨的是一个视觉效果出色、设计精美的UI组件——下拉框。下拉框在网页和应用程序中广泛使用,通常用于提供多个选项让用户选择,比如日期选择、地区选择等。 下拉框的设计不...

    EXTJS 选下拉框,并取得下拉框的值

    在EXTJS中,下拉框(ComboBox)是一种常见的UI组件,常用于用户选择一个或多个预定义的选项。本篇文章将详细讲解如何在EXTJS中操作下拉框,以及如何获取用户选定的值。 首先,创建一个基本的EXTJS下拉框需要定义`...

    下拉框构造_pythonGUI下拉框构造参考_源码

    在Python GUI编程中,我们经常需要创建用户交互界面,其中包括各种控件,如按钮、文本框和下拉框。下拉框(ComboBox)是让用户在一组预设选项中选择一个值的常见控件,适用于限制用户输入的情况。本篇文章将详细讲解...

    下拉框设置为只读模式时不再弹出下拉框

    在网页设计和开发中,经常会遇到需要对交互元素进行特定控制的情况,比如将下拉框(Dropdown)设置为只读模式。"下拉框设置为只读模式时不再弹出下拉框"这个主题,主要涉及到HTML、CSS以及可能的JavaScript技术。...

    树形下拉框样式

    在IT领域,"树形下拉框样式"是一种常见的用户界面元素,主要用于数据组织和导航。它结合了传统的下拉框功能与树形结构,使得用户可以方便地浏览和选择层级关系的数据。这种设计通常应用于文件系统、组织结构或者分类...

    bootstrap树形下拉框 下拉框树形菜单

    Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件,它使得在有限的空间内展示层级关系的数据变得更加直观和易用。在Web开发中,Bootstrap框架提供了丰富的样式和组件,大大简化了网页设计的工作...

    Javascript 操作select下拉框

    获取 Select 下拉框的当前选中文本 (var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text) **功能说明:** 此方法用于获取 `select` 下拉框的当前选中选项的文本。 ...

    angularjs指令 下拉框

    在创建自定义下拉框指令时,我们可能会使用`ng-model`来双向绑定选中项,用`ng-options`来生成下拉框的选项。 创建一个自定义下拉框指令通常包括以下几个步骤: 1. **定义指令**:在AngularJS应用中,使用`angular...

    下拉框和文本框组合共用-可以输入的下拉框ok

    在网页设计和开发中,"下拉框和文本框组合共用-可以输入的下拉框"是一个常见的交互元素,它结合了下拉选择框(Dropdown)和输入文本框(Input Text)的功能,以提供更灵活、用户友好的界面。这种设计通常用于场景,...

    bootstrap树形下拉框 下拉框树形菜单(花了一小时修改过的)

    3. **JavaScript初始化**:在页面加载完成后,你需要调用`bootstrap-treeview.js`中的初始化方法,例如`$('#yourDropdownId').treeview(options)`,`options`是一个对象,可以包含各种配置项,如数据源、展开/折叠...

    无限极分类下拉框 无限极 分类 下拉框

    从给定的代码片段来看,这是一个使用ASP.NET Web Forms实现的无限极分类下拉框功能。无限极分类下拉框通常用于展示具有层级结构的数据,如产品分类、地区选择等,用户可以选择任意级别的分类,而不仅仅是最高级或最...

    asp.net可输入可选择下拉框

    这可能涉及到对控件属性的扩展,例如添加一个“Options”属性来存储下拉框的选项,以及处理自定义输入的“Text”属性。 4. **数据绑定**:控件应该支持数据绑定,允许从数据库或其他数据源动态加载选项。ASP.NET的`...

Global site tag (gtag.js) - Google Analytics