item | desc |
---|---|
selected | 默认选中当前 <option> |
size | 显示几个 option;通常不指定,以免影响页面布局 |
multiple | 多选;使用较少 |
<select name="school" id="school" class="school"> <option value="">please select your school...</option> <option value="guilin">guilin</option> <option value="xiamen">xiamen</option> <option value="foshan">foshan</option> <option value="haikou" selected>haikou</option> <option value="dongguan">dongguan</option> </select>
select { appearance: none; display: block; width: 100%; outline: none; border: none; font: inherit; color: inherit; background-color: transparent; padding: 0 10px; }
.school { border: 1px solid #eee; padding: 4px 10px; background-image: url(../imgs/down.png); background-repeat: no-repeat; background-position: right 10px top 10px; } .school:hover { border-color: #f40; }
item | desc |
---|---|
change | 选择改变时 |
const school = document.getElementById("school") school.addEventListener('change', ()=> { console.log(school.value); // ... })
const school = document.getElementById("school") school.addEventListener('change', (e)=> { console.log(e.target.value); // ... })
<option value="#f40" data-bg="#f40">红色</option>
option[data-bg="#f40"] { background-color: #f40; color: #fff; }
const body = document.body const theme = document.getElementById('theme') theme.addEventListener('change', () => { body.style.background = theme.value })