`

添加与删除下拉列表选项(网页特效)

阅读更多
<html>     
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>网页特效|Linkweb.cn/Js|---添加与删除Option对象</TITLE>
<script language="JavaScript">
// 添加选项
function addOption(pos){
    var objSelect = document.myForm.mySelect;
    // 取得字段值
    var strName = document.myForm.myOptionName.value;
    var strValue = document.myForm.myOptionValue.value;
    // 建立Option对象
    var objOption = new Option(strName,strValue);
    if (pos == -1 & pos > objSelect.options.length)
       objSelect.options[objSelect.options.length] = objOption;
    else
       objSelect.add(objOption, pos);
}
// 删除选项
function deleteOption(type){
    var objSelect = document.myForm.mySelect;
    if (type == true)
       objSelect.options[objSelect.selectedIndex] = null;
    else
       objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(objForm){
    var objSelect = objForm.mySelect;
    var name = objSelect.options[objSelect.selectedIndex].text;
    var value = objSelect.options[objSelect.selectedIndex].value;
    alert(name + " = " + value);
}
</script>
</HEAD>
<BODY>

<h2>添加与删除Option对象</h2>
<hr>
<form name="myForm">
<select name="mySelect">
<option value="中国" Selected>中国</option>
<option value="日本">日本</option>
<option value="美国">美国</option>
</select>
<input type="button" onclick="showOption(this.form)" value="显示">
<input type="button" onclick="deleteOption(true)" value="删除">
<input type="button" onclick="deleteOption(false)" value="Remove方法"><br><br>
选项名称 : <input type="text" name="myOptionName" value="英国"><br>
选项的值 : <input type="text" name="myOptionValue" value="value4">
<input type="button" onclick="addOption(-1)" value="添加">
<input type="button" onclick="addOption(0)" value="插入">
</form>
</BODY>
</HTML>
分享到:
评论

相关推荐

    下拉列表JS网页特效

    在JavaScript中,我们可以通过编程实现更丰富的下拉列表特效,提高用户体验,使得网页更加生动有趣。本主题将深入探讨如何使用JavaScript实现下拉列表的网页特效。 一、HTML基础 在创建下拉列表之前,我们需要先在...

    动态添加选项网页特效

    CSS则用于美化这些动态添加的选项,通过设置样式,我们可以控制选项的字体、颜色、背景、边框等视觉属性,使其与整个网页风格保持一致。此外,CSS3还提供了许多动画效果,如过渡(transition)、动画(animation),...

    CSS3下拉列表收缩展开特效.zip

    【CSS3下拉列表收缩展开特效】是一种在网页设计中常用的交互效果,它使得用户能够通过点击一个主选项来展开或收缩下拉菜单,展示更多选择。这种特效在导航栏、筛选器或设置菜单中常见,能提升用户体验,使页面交互...

    网页特效——菜单导航篇

    6. 选择左右添加删除内容菜单:这种菜单允许用户通过点击左右箭头或拖动来添加或删除内容,常用于展示列表或选项,如购物车、播放列表等场景,增加了用户的参与度和控制感。 这些菜单导航特效通常基于HTML、CSS和...

    超实用的javascript网页技巧或特效

    1. **动态实现下拉列表与文本框之间的转换**: 这个技巧涉及到DOM操作和事件监听。通过JavaScript,我们可以根据用户的需求或者特定的触发事件,将一个下拉列表(`&lt;select&gt;`)元素转换为文本输入框(`...

    标签下拉列表控件.zip

    【标签下拉列表控件】是一款在...总之,【标签下拉列表控件】是一种强大的Web开发工具,能够提升用户在网页表单中的交互体验。通过了解和掌握Selectize的用法,开发者可以创建出更加直观、易用的标签和下拉列表控件。

    jQuery Tagbox插件实现的快速添加标签在下方的可删除特效源码

    例如,你可以从服务器获取数据,创建一个下拉列表供用户选择,当选中某项时,触发添加标签的事件。 5. **删除标签**:每个生成的标签旁边都有一个“X”图标,用户点击时会触发删除事件,jQuery Tagbox插件会处理这...

    jQuery点击下拉选择添加标签代码

    - `index.html`文件通常包含HTML结构,我们需要创建一个下拉列表(`&lt;select&gt;`)以及一个显示已选标签的区域(可以是`&lt;ul&gt;`或`&lt;div&gt;`)。每个已选标签会以`&lt;li&gt;`或`&lt;span&gt;`的形式呈现,同时带有删除按钮供用户移除。...

    ajax 50个经典实例(包括常用特效)

    5. 菜单、下拉列表动态加载:通过Ajax加载动态菜单项或下拉列表选项,根据用户的选择或操作展示相关数据。 6. 图片预览:在上传图片时,使用Ajax实现预览功能,用户可以在选择图片后立即看到效果,增加交互性。 7....

    仿电脑桌面右键jQuery特效.zip

    这个特效能够为网页添加一个类似操作系统桌面那样的交互体验,用户在网页上点击鼠标右键时,会弹出一个具有多种操作选项的菜单。 【描述】中的“仿电脑桌面右键jQuery特效”是指利用jQuery的事件监听和DOM操作功能...

    Android Contacts之二根据4.4实现的联系人列表特效

    开发者可以通过ContentResolver进行查询、添加、修改和删除联系人操作。 侧边栏(sidebar)特效,通常指的是在主界面右侧滑出的导航菜单,这种设计在Android应用中非常常见,可以提供快速访问不同功能的入口。在...

    JS动态添加选项案例分析

    JS动态添加选项案例分析主要介绍了JavaScript中动态操作页面元素,尤其是对下拉列表选项进行动态添加的技术。本文通过一个调查问卷的实例,演示了如何利用JavaScript和HTML实现一个根据用户操作动态生成问题和选项的...

    人才网站职位选择js特效代码.zip

    在职位选择特效中,DOM操作用于创建下拉菜单、选项列表或者滑动面板,以及响应用户的点击事件。 2. **事件处理**:JavaScript事件处理是用户交互的核心,比如`click`事件用于响应用户的点击操作,`change`事件则...

    支持单选多选的jQuery多级下拉选择代码

    开发者可以在这个文件中添加、删除或修改选项,然后由JavaScript动态加载到页面上。 4. `js`:这可能是jQuery插件的JavaScript代码,实现了多级下拉选择器的逻辑,包括单选/多选操作、下拉菜单的展开与收起、模糊...

    jQuery手机移动端弹窗下拉菜单选择代码.zip

    在`index.html`中,通常会包含一个触发下拉菜单的按钮或链接,以及一个隐藏的下拉列表。例如: ```html 选择项 选项1 选项2 选项3 ``` 这里的`id="menuToggle"`用于绑定jQuery事件,`class="hidden"`则是...

    winform界面特效

    实例002和003则涉及动态合并菜单和创建类似Windows开始菜单的效果,这要求开发者对菜单项的添加、删除和排序有深入理解。 接着是任务栏托盘菜单(实例004),这种设计让应用在主窗口最小化时仍然可以通过任务栏托盘...

    HTML5 CSS3网页设计与制作教学导航.pdf

    3. **浏览器窗口与网页元素**:理解浏览器窗口的基本组成部分以及网页的基本结构,如头部、主体和尾部。 4. **文件管理**:学习如何有效地管理网站中的文件和文件夹,包括新建、移动和重命名。 5. **新建和设置网页...

    jQuery实现弹出窗口城市选择特效

    使用jQuery,我们可以轻松地动态添加或删除选项,以及监听用户的选择。例如,可以使用`.append()`方法在选择框中添加城市,`.val()`获取或设置选中的值,`.change()`监听选择事件。 为了实现特效,我们可以利用...

    javascript常用震撼效果演示.rar

    1. **动态下拉列表框**:在网页中,下拉列表框是常见的用户交互元素。通过JavaScript,我们可以实现动态加载选项,响应用户输入或者根据其他条件改变列表内容。例如,使用AJAX异步请求数据,实现实时搜索建议功能。 ...

    winform界面特效设计源码

    - 使用`ToolStripMenuItem`类的`DropDownItems`属性来添加或删除菜单项。 - 需要在每次可能引起菜单变化的事件中调用更新方法。 **3. 类似开始菜单的设计** - **实例说明**:创建一个类似Windows开始菜单的菜单...

Global site tag (gtag.js) - Google Analytics