`

下拉列表功能获取数据添加到select表中

阅读更多
<!DOCTYPE html >
<html>

<head>
<meta charset="utf-8">
<title> Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
</head>
<body>
<select class="textPrepend" autofocus = "autofocus" _multiple = "multiple">
<option value ="">请选择</option>
  <!--<option value ="1">周一</option>
  <option value ="2">周二</option>
  <option value="3">周三</option>
  <option value="4">周四</option>-->
</select>
<button class="textclas">提交</button>

<script src="jquery-1.7.2.min.js"></script>
<script>

$(function(){
/*数组添加到下拉列表中
* var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤'];
$.each(_mozi,function(key,val){
    //回调函数有两个参数,第一个是元素索引,第二个为当前值
    var num=key+1;
    $('.textPrepend').prepend('<option value ="'+key+'">'+val+'</option>');
})*/
/*json数组读取数据添加到select下拉列表中
* var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },

{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
]}
people = eval(people.programmers);
for(var i=0; i<people.length; i++)
{
$('.textPrepend').prepend('<option value ="'+[i]+'">'+people[i].firstName+'</option>');
}*/
/*遍历json对象添加到select下拉列表中
* var people= [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },

{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
]
$.each(people, function(idx, obj) {
    $('.textPrepend').prepend('<option value ="'+idx+'">'+obj.firstName+'</option>');
});*/
});

$('.textclas').on('click',function(){
alert('取到的数值是:'+$('.textPrepend').val());
});
</script>
</body>

</html>
分享到:
评论

相关推荐

    select下拉列表显示图片内容

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉列表,它允许用户从一组预定义的选项中进行选择。然而,传统的`&lt;select&gt;`标签并不支持直接在选项中显示图片,只支持纯文本内容。但随着现代Web技术的发展,我们可以...

    select级联下拉列表

    在网页设计中,"select级联下拉列表"是一种常见的交互元素,用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript(JS)、HTML5和jQuery库来实现,使得用户能够在多个下拉菜单之间进行联动选择,...

    Excel-VBA宏编程实例源代码-在列表框或者下拉列表中选择数据并显示在指定的单元格中.zip

    本实例源代码着重讲解了如何利用VBA宏编程技术,在Excel的列表框或下拉列表中选择数据,并将所选内容动态显示在指定的单元格中。这一功能在数据分析、报告生成以及用户交互界面设计中具有广泛的应用。 首先,我们...

    三级下拉列表 select 网页 html5

    在网页设计中,三级下拉列表是一个常见的交互元素,它用于提供多级分类的选择,比如在模拟地区选择时,我们可能会看到省-市-区这样的三层结构。在HTML5中,这种复杂的下拉列表通常结合`&lt;select&gt;`标签、JavaScript...

    c# 读取数据到下拉列表框

    3. **处理查询结果**:遍历查询结果,并将数据添加到ComboBox中。 4. **关闭数据库连接**:最后,确保数据库连接被正确关闭。 #### 示例代码分析 以下是对给定代码片段的详细解析: ```csharp private void ...

    Ajax实现java web 中下拉列表二级联动

    5. **更新DOM**:JavaScript接收到服务器返回的JSON数据后,解析并填充到二级下拉列表中。可以使用`innerHTML`属性或者jQuery的`append()`方法来添加新的选项。 在提供的文件中,"news.sql"可能包含数据库脚本,...

    VB在下拉列表中显式数据库的内容

    在本主题中,我们将深入探讨如何在VB应用程序中显式地将数据库内容加载到下拉列表中,以便用户能够根据数据库中的数据进行选择。 首先,我们需要连接到数据库。VB支持多种数据库连接方式,如ADO(ActiveX Data ...

    Html dom中的select, option_ 级联下拉列表

    select元素代表了下拉列表本身,而option元素则是列表中的各个选项。在级联下拉列表中,通常通过改变option元素来实现动态更新。在HTML DOM中操作select和option时,可以使用诸如document.getElementById获取select...

    使用select2实现下拉列表动态模糊查询

    综上所述,Select2 是一个功能强大的下拉列表插件,能帮助开发者轻松实现动态模糊查询、多选、分组等功能,提升用户体验。只需正确引入资源、初始化Select2并适当配置,就能将其功能融入到你的网页中。

    SelectBox下拉复选框多选插件

    在下拉列表中实现多选,就是将这种多选功能融入到下拉菜单中,用户可以选择并查看已选的项目。 3. **下拉列表**:下拉列表是网页设计中常见的交互元素,通过点击一个按钮显示或隐藏选项列表。它节省了页面空间,...

    在struts中实现下拉列表

    通过ActionForm对象的`selectedOption`属性,你可以获取用户在下拉列表中选择的值: ```java public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, ...

    JS实现省市区地区下拉列表数据

    一旦数据加载完成,我们就可以为每个下拉列表创建`&lt;select&gt;`元素,并为它们添加`onchange`事件监听器。 事件处理是关键部分,因为我们需要监听用户的选择并根据选择更新下一级别的列表。以下是一个简单的示例: ``...

    input 级联下拉列表

    在网页设计和开发中,`input`级联下拉列表是一种常见的交互元素,它允许用户在选择一个选项后,根据该选项的值动态地显示相关的第二个或更多下拉列表。这种设计模式通常用于处理层级关系的数据,如国家/地区、省份/...

    servlet+ajax做的两个下拉列表联动

    当用户在第一个下拉列表中做出选择,这个选择会被发送到服务器,Servlet接收到请求后查询数据库,找到与之相关的数据,然后将这些数据以JSON或其他格式响应回前端。 接着是Ajax,全称为Asynchronous JavaScript and...

    guns下拉自定义获取

    在guns中,select.tag用于处理下拉列表的展示和交互,通过定制化获取数据,我们可以更灵活地控制下拉选项的加载,从而提高应用的响应速度和用户体验。 在guns项目中,"select.tag"的修改版主要是对原始组件进行了...

    PB中下拉列表使用的若干技巧.doc

    在窗口Open事件或下拉列表的Getfocus事件中,通过SQL查询获取数据,然后插入到下拉列表中。例如,以下代码示例展示了如何根据hotelid查询p16表,将单位名称添加到下拉列表: ```sql string id, ic int i-op = 1 ...

    省市区下拉列表.rar

    同时,考虑到性能,数据加载和下拉列表更新应当尽可能高效,避免一次性加载所有数据。 5. 错误处理:在实际应用中,需要考虑数据加载失败或用户选择非法值的情况,进行适当的错误处理和提示。 6. 跨浏览器兼容性:...

    下拉列表控件的控制

    当用户选择省份时,会触发一个事件,该事件发送请求到服务器,服务器查询数据库获取对应省份的城市数据,然后将这些数据返回给前端,前端再用这些数据填充城市下拉列表。 在这个项目中,C#可能被用作后台处理语言,...

    在GRIDVIEW 控件中某一列显示下拉列表,并且绑定数据库的另外一张表

    在本场景中,我们关注的是如何在GridView控件中实现某一列显示下拉列表,并且这个下拉列表的数据来源于数据库的另一张表。GridView控件是ASP.NET中用于显示数据集的强大工具,它允许用户对数据进行查看、编辑和排序...

    ajax 下拉列表联动

    6. **DOM操作**:使用JavaScript操作DOM,清空市(县)下拉列表,然后根据返回的数据添加新的选项。 7. **最后的联动**:当市(县)下拉列表更新完成后,可以继续监听其`change`事件,以便在用户选择市(县)后,...

Global site tag (gtag.js) - Google Analytics