＜select＞下拉选择框

最新推荐文章于 2024-09-10 13:54:44 发布

原创最新推荐文章于 2024-09-10 13:54:44 发布 · 3.2k 阅读

CC 4.0 BY-SA版权

本文介绍了HTML中的下拉菜单<select>的使用，包括如何创建、添加和删除选项，以及如何实现级联下拉效果。此外，还讨论了textarea的提示列表、表单验证和自定义错误信息，以及表单提交的各种方式，包括无刷新提交和通过Enter键提交。同时，文章提到了页面元素的水平和垂直居中方法。

下拉菜单<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;}