＜select＞下拉选择框

下拉菜单<select>项，分组:

<select name=”course”><option>课程选择</option><optgroup label=”1.DOM基础”><option value=”1.1”>1.1文档树</option><option value=”1.2”>1.2节点操作</option></optgroup>
</select>

创建选项:<option value=’1.2’>1.2节点操作</option>

var option = Document.createElement(‘option’)

option.value = ‘1.2’;

option.textContent = ‘1.2节点操作’;

或者new Option(‘1.2节点操作’ , ’1.2’);

添加选项:

var option = new Option(‘1.0概述’ , ‘1.0’)

opt11.insertAdjacentElement(option,’beforeBegin’)

或者select.add(option , opt11)

删除选项:

opt12.parentNode.removeChild(opt12)

或者select.remove(2)

select级联下拉选择器

<form name=”course”><select name=”chapter”><option>请选择章目录</option></select><select name=”section”><option>请选择节目录</option></select>
</form>
<script>var chapters = [{text:’1.DOM基础’ , value:’1’} , {text:’2.事件模型’ , value:’2’}]var sections = {1:[{text:’1.1文档树’ , value:’1.1’} , {text:’1.2节点操作’ , value:’1.2’}],2:[{text:’2.1事件类型’ , value:’2.1’},{text:’2.2事件模型’,value:’2.2’}]}function fillSelect(select,list){for(var i=select.length-1;i>0;i--){select.remove(i);}list.forEach(function(data){var option = new Option(data.text , data.value);select.add(option);})}fillSelect(chapterSelect,chapters);chapterSelect.addEventListener(‘change’ , function(event){var value = event.target.value,list = sections[value] || [];fillSelect(sectionSelect , list);})
</script>

textarea输入框@提示列表:

textarea.addEventListener(‘input’ , function(event){var target = event.target,cursor = target.selectionStart;if(target.value.charAt(cursor-1)===’@’){doShowAtList(function(name){var end = cursor + name.length;target.setRangeText(name , cursor ,end , ‘end’)})}
})

input表单验证，自定义错误信息提示

input.addEventListener(‘invalid’ , function(event){var target = event.target;if(target.validity.valueMissing){target.setCustomValidity(‘请输入姓名！’)}
})

<form action=”” method=”post” novalidate>禁止可验证表单元素做验证

表单提交，提交按钮，或者用form.submit();触发onsubmit事件，可以做验证，可以阻止事件的默认行为来取消表单提交

form.addEventListener(‘submit’ , function(event){var notValid = false;var elements = event.target.elements;//验证规则...if(notValid){ event.preventDefault();}//阻止事件默认行为，取消提交
})

无刷新表单提交，form.target=”bind” iframe.name=”bind” form-->server-->iframe

<iframe name=”targetFrame” class=”f-hidden”></iframe>
<form action=”” method=”post” target=”targetFrame”><input name=”a” /><input name=”b” /><button>submit</button>
</form>

按enter键提交---隐式提交

水平居中，垂直居中:

<div class=”parent”> <div class=”child”>居中</div>
</div>

1---

.parent{ text-align:center; display:table-cell; vertical-align:middle;
}
.child{ display:inline-block;
}

2---

.parent{ position:relative;
}
.child{ position:absolute; left:50%; top:50%; transform:translate(-50% , -50%);
}

3---

.parent{ display:flex; justify-content:center; align-items:center;}

＜select＞下拉选择框相关推荐

python select模块安装_python+selenium select下拉选择框定位处理方法
一.前言总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPa ...
html下拉选择框箭头改为年,CSS自定义select下拉选择框的样式(不用其他标签模拟)...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件(含代码.案例.截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head>< ...
自定义html下拉选择框,CSS自定义select下拉选择框的样式(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
html下拉选择图片,图片+JavaScript+CSS打造漂亮的select下拉选择框
下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px; ...
类似select下拉选择框同时又支持手动输入的元素 datalist 介绍。
有时候我们会有这样的需求,通过使用下拉菜单给用户一定的选择范围,同时又可以使用户在找不到选择项的时候手动输入.这个时候我们就需要用到html5的datalist属性了. datalist包含<o ...
jsp 中select 下拉选择框 el 三元运算符如何选中与不选中
<select name="is_hot"> ...
Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
js下拉 selenium_selenium的下拉选择框
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

＜select＞下拉选择框

＜select＞下拉选择框相关推荐

最新文章

热门文章