`

手动在页面添加值到下拉列表而不刷新的demo

阅读更多
手动在页面添加值到下拉列表而不刷新的demo

在一个页面中有一个"添加"按钮和一个下拉列表,在单击"添加"按钮后,便在下拉列表中增加相应的选项,不用刷新页面就能看到列表的更新情况

Html代码
<html>    
<head>    
<title>添加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);    
}    
  
</script>    
</head>    
<body>    
  
<hr>    
<form name = "myForm">    
<select name = "mySelect">    
<option value = "第一名" Selected>中国</option>    
<option value = "第二名">日本</option>    
<option value = "第三名">美国</option>    
<option value = "第四名">英国</option>  
</select>    
<br>  
  
选项名称 : <input type = "text" name = "myOptionName" value = "英国"><br>    
选项的值 : <input type = "text" name = "myOptionvalue" value = "第四名">    
<input type = "button" onclick = "addOption(-1)" value = "添加">    
  
</form>    
</body>    
</html> 

分享到:
评论

相关推荐

    下拉刷新的demo

    这个“下拉刷新的demo”示例显然展示了如何在iPhone应用中实现这一功能,特别是与表格视图(TableView)结合使用。下面将详细介绍下拉刷新的基本原理、实现方式以及与标签“特效”相关的技术。 一、下拉刷新基本...

    Android下拉刷新Demo

    这个功能增强了用户体验,使得用户能够实时查看更新的内容,而无需手动刷新整个页面。下面将详细探讨如何在Android中实现这个功能,特别是针对ListView、ScrollView和GridView的下拉刷新。 1. **下拉刷新的基本原理...

    下拉刷新demo

    这个"下拉刷新demo"是使用第三方类库来实现的,特别关注于`UITableView`的更新功能。这里我们将深入探讨下拉刷新的原理、实现方式以及如何使用第三方库来完成这一功能。 一、下拉刷新原理 下拉刷新(Pull-to-...

    任意控件下拉刷新demo

    这个“任意控件下拉刷新demo”旨在展示如何在各种控件中实现这样的功能,使得开发者可以轻松地在自己的应用中集成这一特性。 下拉刷新(Pull-to-Refresh)机制允许用户通过在屏幕顶部向下拖动来触发数据的更新。当...

    IOS下拉刷新Demo实现

    在iOS开发中,下拉刷新(Pull-to-Refresh)是一种常见的用户交互模式,它允许用户通过在列表顶部向下拉动来加载更多数据或更新现有数据。本教程将介绍如何使用EGOTableViewPullRefresh开源库在iOS应用中实现下拉刷新...

    XlistView Demo(上拉加载,下拉刷新)

    在Android开发中,"XlistView Demo(上拉加载,下拉刷新)" 是一个常见的应用场景,主要用于提升用户体验,使得用户可以方便地查看更多的数据而无需手动翻页。这个Demo主要展示了如何集成并实现XlistView控件,以及...

    使用非常简单的上拉、下拉刷新,demo

    1. **下拉刷新**:当用户在列表顶部向下拉动时,会显示一个刷新指示器,松开手指后,视图开始执行刷新操作。开发者可以通过调用`addPullToRefreshWithActionHandler:`方法来添加下拉刷新,并提供一个Block来处理刷新...

    Android应用源码 ListView下拉刷新 Demo.zip

    要在ListView中添加下拉刷新,首先需要在布局XML文件中加入`SwipeRefreshLayout`作为父容器,并将ListView作为其子View。然后,在代码中设置监听器,处理刷新事件。 4. **自定义Adapter** 为了显示ListView中的...

    ListView下拉刷新Demo

    `ListView`的下拉刷新功能则成为现代移动应用的标准特性,它允许用户通过在顶部向下拉动列表来获取最新的数据。本教程将深入讲解如何自定义`ListView`实现下拉刷新功能,特别适合初学者学习。 1. **下拉刷新概念** ...

    Android ListView下拉刷新 Demo.zip

    本Demo主要讲解如何在Android应用中实现ListView的下拉刷新效果。 一、ListView的基础知识 ListView是Android SDK中的一个视图容器,用于展示大量数据的列表。它通过复用View来优化性能,避免为每个数据项创建一个...

    listview gridview 上拉加载 下拉刷新 包含6个demo

    这些功能使得用户在接近列表顶部时可以刷新数据,在接近底部时可以加载更多内容,无需手动滚动到列表的起始或结束位置。 "上拉加载"通常称为"无限滚动"或"加载更多",它在用户滚动到ListView或GridView的底部时自动...

    上拉刷新下拉加载demo

    在移动应用开发中,"上拉刷新"和"下拉加载"是常见的用户交互功能,尤其是在数据列表场景中。这两个特性极大地提升了用户体验,使得用户能够方便地查看更多的内容或者获取最新的信息。本示例"上拉刷新下拉加载demo...

    mescroll上拉加载下拉刷新插件(附带demo)

    当用户下拉列表时,mescroll会触发刷新事件,开发者可以在这个事件中获取新的数据并更新列表。同样,当用户滚动到列表底部时,mescroll会自动触发加载更多数据的事件,无需手动判断页码或时间等变量。 ### 3. 智能...

    iscoll 实现下拉刷新上拉加载更多

    iscoll 是一个专门为实现这种功能而设计的组件,它允许用户在滚动到列表顶部时触发下拉刷新操作,滚动到底部时触发上拉加载更多数据的操作。这个经典demo 提供了一个简单易懂的实现方式,方便开发者快速集成到自己的...

    上拉加载下拉刷新

    下拉刷新允许用户通过在顶部下拉页面来刷新当前显示的数据。常见于新闻列表、邮件应用等,确保用户始终看到最新的内容。实现方式是在页面顶部设置一个可拉伸的区域,当用户向下拉动到一定程度时,释放后触发刷新...

    继承ListView的下拉刷新控件

    3. **添加动画效果**:在检测到下拉动作后,启动旋转动画并显示刷新提示信息,让用户知道数据正在加载。 4. **处理刷新逻辑**:在用户触发刷新后,执行实际的刷新操作,例如从网络获取新数据。这一步通常在一个后台...

    模仿网易新闻下拉刷新

    在Android应用开发中,"下拉刷新"是一种常见的交互设计,允许用户通过在列表顶部向下拉动来更新数据。网易新闻的下拉刷新效果是许多开发者模仿的典范,它结合了良好的用户体验和美观的动画效果。这个demo就是针对...

    滑动加载,下拉刷新

    下拉刷新,又称下拉重载,是一种允许用户通过下拉列表头部来刷新内容的功能。在用户下拉屏幕到一定程度后,会触发一个刷新操作,通常会显示一个旋转的指示器,表示数据正在更新。这种功能在实时性要求较高的应用中很...

    android listview demo 下拉加载更多

    下拉刷新是一种常见于移动应用的设计模式,用户在顶部向下拉动列表,显示一个刷新指示器,然后松手后列表会自动刷新内容。在Android中,可以使用开源库如`SwipeRefreshLayout`来实现这一功能。在这个demo中,当用户...

    手机端各DEMO展示列表

    而在用户滚动到底部时,上拉刷新常用于加载更多项目,如文章、图片或商品列表。这两种功能的实现需要与服务器进行异步通信,确保在数据加载过程中显示适当的加载指示器,避免用户感到等待的不耐烦。 接着,手机端...

Global site tag (gtag.js) - Google Analytics