- 浏览: 38258 次
- 性别:
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端,js,jquery (8)
- html (2)
- jquery,html5,html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端,js,jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒,ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
<!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>
<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>
发表评论
-
vue 倒计时
2019-07-17 17:16 0time: 59, timer: nu ... -
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端碰到的坑
2017-09-22 15:34 695不废话 直接上代码: *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11841.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 481<div class="js_mobile&q ... -
js 规格多选,选中显示和还可以选择的数量 多维度选择
2017-03-17 16:09 1080<body> <section class= ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 356/*遮罩层*/ .shadow{ position: fixe ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
esayui
2016-10-28 17:12 576$(function(){ $('#peopleGrid') ... -
字符串分割显示
2016-09-20 14:09 519/* 运单号分割显示 */ var oT=document. ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 596<!DOCTYPE html> <html& ... -
功能 两级联动菜单
2016-08-26 15:13 541<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 594<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4549加广告与加封页脚的代码是差不多的! 以前封页脚都是图片现在 ... -
图形笑脸 增加动画
2016-07-21 15:23 581<!DOCTYPE html> <html& ... -
小用例
2016-07-20 17:24 372<!DOCTYPE html> <html& ... -
mui框架 上拉加载 下拉刷新
2016-07-15 15:38 724<!DOCTYPE html> <html& ... -
hcharts视图报表
2016-05-03 14:48 566function queryloginUser() { ...
相关推荐
在网页设计中,`<select>`元素通常用于创建下拉列表,它允许用户从一组预定义的选项中进行选择。然而,传统的`<select>`标签并不支持直接在选项中显示图片,只支持纯文本内容。但随着现代Web技术的发展,我们可以...
在网页设计中,"select级联下拉列表"是一种常见的交互元素,用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript(JS)、HTML5和jQuery库来实现,使得用户能够在多个下拉菜单之间进行联动选择,...
本实例源代码着重讲解了如何利用VBA宏编程技术,在Excel的列表框或下拉列表中选择数据,并将所选内容动态显示在指定的单元格中。这一功能在数据分析、报告生成以及用户交互界面设计中具有广泛的应用。 首先,我们...
在网页设计中,三级下拉列表是一个常见的交互元素,它用于提供多级分类的选择,比如在模拟地区选择时,我们可能会看到省-市-区这样的三层结构。在HTML5中,这种复杂的下拉列表通常结合`<select>`标签、JavaScript...
3. **处理查询结果**:遍历查询结果,并将数据添加到ComboBox中。 4. **关闭数据库连接**:最后,确保数据库连接被正确关闭。 #### 示例代码分析 以下是对给定代码片段的详细解析: ```csharp private void ...
5. **更新DOM**:JavaScript接收到服务器返回的JSON数据后,解析并填充到二级下拉列表中。可以使用`innerHTML`属性或者jQuery的`append()`方法来添加新的选项。 在提供的文件中,"news.sql"可能包含数据库脚本,...
在本主题中,我们将深入探讨如何在VB应用程序中显式地将数据库内容加载到下拉列表中,以便用户能够根据数据库中的数据进行选择。 首先,我们需要连接到数据库。VB支持多种数据库连接方式,如ADO(ActiveX Data ...
select元素代表了下拉列表本身,而option元素则是列表中的各个选项。在级联下拉列表中,通常通过改变option元素来实现动态更新。在HTML DOM中操作select和option时,可以使用诸如document.getElementById获取select...
综上所述,Select2 是一个功能强大的下拉列表插件,能帮助开发者轻松实现动态模糊查询、多选、分组等功能,提升用户体验。只需正确引入资源、初始化Select2并适当配置,就能将其功能融入到你的网页中。
在下拉列表中实现多选,就是将这种多选功能融入到下拉菜单中,用户可以选择并查看已选的项目。 3. **下拉列表**:下拉列表是网页设计中常见的交互元素,通过点击一个按钮显示或隐藏选项列表。它节省了页面空间,...
通过ActionForm对象的`selectedOption`属性,你可以获取用户在下拉列表中选择的值: ```java public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, ...
一旦数据加载完成,我们就可以为每个下拉列表创建`<select>`元素,并为它们添加`onchange`事件监听器。 事件处理是关键部分,因为我们需要监听用户的选择并根据选择更新下一级别的列表。以下是一个简单的示例: ``...
在网页设计和开发中,`input`级联下拉列表是一种常见的交互元素,它允许用户在选择一个选项后,根据该选项的值动态地显示相关的第二个或更多下拉列表。这种设计模式通常用于处理层级关系的数据,如国家/地区、省份/...
当用户在第一个下拉列表中做出选择,这个选择会被发送到服务器,Servlet接收到请求后查询数据库,找到与之相关的数据,然后将这些数据以JSON或其他格式响应回前端。 接着是Ajax,全称为Asynchronous JavaScript and...
在guns中,select.tag用于处理下拉列表的展示和交互,通过定制化获取数据,我们可以更灵活地控制下拉选项的加载,从而提高应用的响应速度和用户体验。 在guns项目中,"select.tag"的修改版主要是对原始组件进行了...
在窗口Open事件或下拉列表的Getfocus事件中,通过SQL查询获取数据,然后插入到下拉列表中。例如,以下代码示例展示了如何根据hotelid查询p16表,将单位名称添加到下拉列表: ```sql string id, ic int i-op = 1 ...
5. 定义getList方法来执行接口请求,获取远程数据,并将其添加到options数组中。 这里的关键点在于,我们需要监听el-select组件内部的滚动事件,并在滚动到底部时加载新的数据。可以通过计算scrollHeight(元素内容...
同时,考虑到性能,数据加载和下拉列表更新应当尽可能高效,避免一次性加载所有数据。 5. 错误处理:在实际应用中,需要考虑数据加载失败或用户选择非法值的情况,进行适当的错误处理和提示。 6. 跨浏览器兼容性:...
当用户选择省份时,会触发一个事件,该事件发送请求到服务器,服务器查询数据库获取对应省份的城市数据,然后将这些数据返回给前端,前端再用这些数据填充城市下拉列表。 在这个项目中,C#可能被用作后台处理语言,...
在本场景中,我们关注的是如何在GridView控件中实现某一列显示下拉列表,并且这个下拉列表的数据来源于数据库的另一张表。GridView控件是ASP.NET中用于显示数据集的强大工具,它允许用户对数据进行查看、编辑和排序...