select多選和checkbox複選的值在js和action中的展現形式

話不多說,例如在前端頁面:

<body>
    <button type="button" class="btn btn-info" οnclick="show()">測試</button>	
	<form action="/amp/test/query">
		<select multiple="true" name="fruits" id="select">
			<option value="a">蘋果</option>
			<option value="b">香蕉</option>
			<option value="c">梨</option>
			<option value="d">葡萄</option>
		</select>
		
		<label><input name="sports"  type="checkbox" value="running"/>跑步</label>
		<label><input name="sports"  type="checkbox" value="swimming"/>游泳</label>
		<label><input name="sports"  type="checkbox" value="climbing"/>登山</label>
		
		<input type="submit" value="提交" />
	</form>

</body>

 我在後臺寫一個action接收提交的內容。

 

例如我選擇蘋果、香蕉、葡萄時,後臺action接收到fruits的數據爲:a,c,d;選擇跑步、游泳時,後臺接收到的sports的值爲:running, swimming(即兩者傳給後臺的都是用,連接的字符串);

測試前端接收到的值的js:

function show() {
			var val1 = $("#select").val();
			console.log("===select:" + val1);
			var val2 = $("input[name='sports']:checked").val();
			console.log("===checkbox:" + val2);
		}

 

而點擊測試按鈕是,degub前端會發現接收到select多選框的值是一個Array,[0]=a, [1]=b, [2]=d;而checkbox在前端的值爲running(永遠是數組第一個元素的值。),如果要獲取選中的值必須循環 $("input[name='sports']:checked")這個對應的數組的每一個元素。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章