select初始化添加option,通过标签给出回显值,由于回显值和初始化值option中有一个值重复,去重等问题!
第一张图片:

第二张图片

/**
*该方法是为了去重,所谓去重就是 因为回显给select附上了值并设置为selected选中状态,而在我们初始化所有的select添加option元素中于回显的值重复,那么就要去除select option中重复值
*/
function removeRepeatSelectHour(h){
var $option=$("option:selected",h);//获取被选中,
// alert($option.val());
console.log($option.val()+'/'+h.options.length);
var size= h.options.length;
var $options=$("option",h);//获取select所有选项,
if(h.options.length>25){// 再次获取被选中,禁止下面比较再次把之后的数据删除掉
$options.each(function(i,n){
// var options = "";
// alert($(n)[0].text);
if($option.val()===$(n)[0].text && size==h.options.length && $(n)[0].index!=0){//&& size==h.options.length可以不要 让选中的和下面option选项比较是否有重复的,并且$(n)[0].index!=0 因为第一次拿到的数据是selected选中的值,不能删除!
// alert($option.val()+'/'+$(n)[0].index);
h.options[$(n)[0].index].remove();//通过$(n)[0].index 即option选项的下标元素删除该元素
}
/* $(h).find("option").each(function(j,m){
alert(j);
if(options.indexOf($(m)[0].outerHTML) == -1){
options += $(m)[0].outerHTML;
}
}); */
// $(n).html(options);
});
}
// h.options.remove($option.val());
// h.remve();
}
//hour这个函数方法没有好好整理,界面就是引用此方法,不过很好容易理解,回头下次做有时间可参考下面,强调记住不是通过id 获取的标签元素要用这个selectObj.options.add(new Option(val , val)); 否则用append,别用appendchild
function hour(){
//var a=$("#sltid ").find("option:selected").val();
var sltid= $(".sltid");
var sltids= $(".sltids");
for ( var i = 0; i <=24; i++)
{
var opt = document.createElement("option");
if(i<10){
opt.value = "0"+i;
opt.innerText ="0"+i;
} else{
opt.value =i;
opt.innerText = i;
}
sltid.append(opt);
}
for ( var j = 0; j <=60; j++)
{
var opts = document.createElement ("option");
if(j<10){
opts.value = "0"+j;
opts.innerText ="0"+j;
} else{
opts.value =j;
opts.innerText = j;
}
sltids.append(opts);
}
}
//页面初始化加载这些时间等下拉框
$(document).ready(function() {
hour();
loadYearOrMonth();
//加入分页的绑定
$("#Pagination").pagination(${mp.page.pages }, {
callback: pageselectCallback,
prev_text: "<i></i>上一页",
next_text: "下一页 <i></i>",
link_to: "javascript:",
items_per_page: 1,
num_display_entries: 1,
current_page: ${mp.page.pageNum-1 },
num_edge_entries: 1
});
});
function loadYearOrMonth()
{
var echoDate ='${mp.YMDate}';
var year=echoDate.substring(0, 4);
var month=echoDate.substring(5, 7);
var now = new Date();
var currentYear = year;
var currentMonth = month;
BindSelect(document.getElementById('year'), currentYear, currentYear + 8, currentYear);
BindSelect(document.getElementById('month'), 1, 12, currentMonth);
};
function BindSelect(selectObj, startValue, endValue, selectedValue)
{
var i = 0;
for(var val = startValue; val <= endValue; val++)
{
selectObj.options.add(new Option(val , val));
if(val == selectedValue)selectObj.options[i].selected = true;
i++;
};
};
select初始化添加option,通过标签给出回显值,由于回显值和初始化值option中有一个值重复,去重等问题!的更多相关文章
- JS对select动态添加option操作 (三级联动) (搜索拼接)
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- js实现select动态添加option
关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...
- jquery-ui-bootstrap动态添加和删除标签页封装【效果更炫】
1.效果图 2.导入js和css <link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css& ...
- JS对select动态添加options操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
随机推荐
- 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法
原因1:给定目录下jvm.dll不存在. 对策:(1)重新安装jre或者jdk并配置好环境变量.(2)copy一个jvm.dll放在该目录下. 原因2:eclipse的版本与jre或者jdk版本不一致 ...
- 安装了ruby后怎么安装sass
在命令行中输入 ruby -v 查看版本号 先移除默认的https://rubygems.org源,命令为gem sources --remove https://rubygems.org/,按回车 ...
- Python json.dumps 特殊数据类型的自定义序列化操作
场景描述: Python标准库中的json模块,集成了将数据序列化处理的功能:在使用json.dumps()方法序列化数据时候,如果目标数据中存在datetime数据类型,执行操作时, 会抛出异常:T ...
- synergy 使用记录
synergy 是一个多台电脑之间,共享鼠标.键盘的开源工具,做的很赞.目前,这个工具对 Windows.Linux.MacOS 都有很好的支持. 手上 arm 板安装的是 debian 系统,所以, ...
- 【汉字】转【pīnyīn】
引言 github地址:aizuyan/pinyin 无意中看到了overtrue/pinyin这个项目,感觉很有意思, 这个项目做了这么一件事情: 将汉字转化为拼音 刚看到这里是不是觉得没什么难度, ...
- 利用django创建一个投票网站(一)
这是教程的原始链接:http://django-intro-zh.readthedocs.io/zh_CN/latest/part1/ 创建你的第一个 Django 项目, 第一部分 来跟着实际项目学 ...
- Chrome 开发工具之Timeline
之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...
- 重复安装相同包名APK出现的问题。
一. INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES 这样的问题主要是签名冲突造成的,比如你使用了ADB的debug权限签名,但后来使用标准sign签名后 ...
- 2 django系列之django分页与templatetags
preface 当页面出现的条目多的时候,我们就需要使用分页功能了.Django作为一个知名的web框架,自然也提供了分页功能,下面说说它. Python-shell 练练手 在python下入手 先 ...
- 502 Bad Gateway深究
早上收到502报警,设置的报警规则是502错误两分钟超过500就报警. 排障流程: 日志分析系统报障-->查看日志系统日志-->nginx错误日志-->php错误日志-->ph ...