首页 > 其他 > 详细

<select>标签的简单用法

时间:2020-07-19 14:25:30      阅读:39      评论:0      收藏:0      [点我收藏+]

HTML:

<!DOCTYPE html>
<html>
  <body>
     <div>
        <div>
            <label>请选择:</label>
        </div>
        <div>
            <select id="add_number">
                <option id="on">是</option>
                <option id="off">否</option>
            </select> 
        </div>
    </div>
  </body>
  <script type="text/javascript">
  </script>
</html>

显示:

技术分享图片

切换事件:

document.getElementById("add_number").onchange = function(){
    alert("add_number发生切换")
}

遍历选项:

var options = document.getElementById("add_number").options
for (i=0; i<options.length; i++){	
    alert(options[i].innerHTML)
}

判断被选中选项:

var options = document.getElementById("add_number").options
for (i=0; i<options.length; i++){	
    if(options[i].selected == true){
      alert("被选中选项:" + options[i].innerHTML)
    }
}

完整例子:

<!DOCTYPE html>
<html>
  <body>
      <div>
          <div>
              <label>请选择:</label>
          </div>
          <div>
              <select id="add_number">
                  <option id="on">是</option>
                  <option id="off">否</option>
              </select> 
          </div>
      </div>
      <button id="btn1">打印所以选项</button>
      <button id="btn2">判断当前选项</button>
  </body>
  <script type="text/javascript">
    document.getElementById("add_number").onchange = function(){
        alert("add_number发生切换")
    }
    document.getElementById("btn1").onclick = function(){
    	var options = document.getElementById("add_number").options
        for (i=0; i<options.length; i++){	
            alert(options[i].innerHTML)
		}
    }
    document.getElementById("btn2").onclick = function(){
    	var options = document.getElementById("add_number").options
        for (i=0; i<options.length; i++){	
            if(options[i].selected == true){
                  alert("被选中选项:" + options[i].innerHTML)
	    	}
	}
    }
  </script>
</html>

<select>标签的简单用法

原文:https://www.cnblogs.com/Higurashi-kagome/p/13339195.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!