js控制、獲取復選框、下拉列表的信息


一.獲取復選框信息(以問卷調查為例子)

 需求:選項為多選,且控制一個問題最多只能選擇X個答案
jsp頁面:
<form class="checkchoose" action="#">
<!-- 開始循環 -->
<c:choose>
<c:when test="${not empty list_questions}">
<c:forEach items="${list_questions}" var="var" varStatus="vs">
<div class="wrapper">
<div class="checkbox-box">
<input name="box2" type="checkbox" id="${var.answer_id}"onclick="countChoices(this)" />
<span></span>
</div>
<label for="usepwd">${var.answer_text</label>
</div>
</c:forEach>
</c:when>
</c:choose>
</form>
js:判斷選擇是否超出最大限制
function countChoices(obj) {
max = 2;
box1 = obj.form.box1.checked;/*//
box2 = obj.form.box2.checked;/*//
box3 = obj.form.box3.checked;/*//
count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0);/*//
if(count > max) {
//alert("對不起,你只能選擇" + max + "個項目!");
obj.checked = false;
}
}

邏輯:在每個input后面加個點擊事件,只要一點擊選項框的狀態就變為checked,用條件運算符轉換改了的為1以此計算用戶選的選項個數,如果超出限制則將checked修改為false。

細思:打上/*//的代碼行,重復。如果一個問題有10+個選項那我豈不是還要寫那么多個box?

優化:用for循環,並將統計用戶已選的項count封成單獨的一個函數

var countCheckBoxs =function(checkBoxName){
var checkBoxs = document.getElementsByName(checkBoxName);
var count = 0;
for(j=0;j<checkBoxs.length;j++){
if((checkBoxs[j]).checked==true){
count++;
}
}
return count;
}

function countChoices(obj) {
var count = countCheckBoxs(obj.name);

if (count > ${max_select_item}) {
alert("對不起,你只能選擇" + ${max_select_item} + "個項目!");
obj.checked = false;
}
}

寫在后面的話(TODO)
1.獲取用戶的選項信息post到服務器上
2. 用戶提交,在submit按鈕上添加監聽事件檢查用戶是否漏答;


二. 獲取下拉列表的信息(做一個年份選擇卡)

需求:
1.從2011-2017,2011年起始年是固定的,2017為當前年即要不斷更新;
2.默認選項為當前年
3.能獲取到用戶選擇的年份(即列表框里的信息)

1.獲取當前年,js自帶函數 getFullYear()

var myDate= new Date(); 
var startYear=2011;//可以查閱的最早的數據
var nowYear=myDate.getFullYear();//最新年份 當前年

2.下拉列表年份是不斷更新的,所以不能在select里面寫死,應該動態加載。

html:
<select name="year" id="select">

</select>
js動態加載:
var obj=document.getElementById('select')
for (var i=startYear;i<=nowYear;i++) {
obj.options.add(new Option(i+"年",i)); }
/*i,i對應文本和value值*/}

這里寫圖片描述

3.默認 選擇當前年

obj.options[obj.options.length-1].selected=true;/*默認是從0開始計數*/

4.獲取用戶選擇的年份值

 document.getElementById('select').onchange=function(){
console.log(this.options[this.options.selectedIndex].value)}

完。。
哦不,未完待續。。。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com