百度前端技术学院-基础-day20-21
第二十到第二十一天：让你和页面对话
task1 控制元素的显示及隐藏
实现以下功能：
- 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
- 当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IFE ECMAScripttitle> 6 <style> 7 select { 8 display: none; 9 } 10 style> 11 head> 12 <body> 13 <label> 14 <input id="school" name="status" type="radio"> 15 School 16 label> 17 <label> 18 <input id="company" name="status" type="radio"> 19 Company 20 label> 21 22 <select id="school-select"> 23 <option>北京邮电大学option> 24 <option>黑龙江大学option> 25 <option>华中科技大学option> 26 select> 27 28 <select id="company-select"> 29 <option>百度option> 30 <option>爱奇艺option> 31 select> 32 <script> 33 var d1 = document.querySelector('#school'); 34 var d2 = document.querySelector('#company'); 35 var s1 = document.querySelector('#school-select'); 36 var s2 = document.querySelector('#company-select'); 37 d1.addEventListener('click', function(){ 38 if (d1.checked == true){ 39 s1.style.display = 'inline'; 40 s2.style.display = 'none'; 41 } 42 }) 43 d2.onclick = function(){ 44 s2.style.display = 'inline'; 45 s1.style.display = 'none'; 46 } 47 script> 48 body> 49 html>