JS遍歷select多選項目以陣列比對符合值-教學撰寫:徐嘉裕Neil hsu

要取得select多選項目(multiple)值必須使用each遍歷全部的select選單後取得selected狀態val，存成陣列再用$.inArray()比對陣列中是否有符合條件，以下為應用範例說明

例如有一個群組選單，我們要判斷【訪客】群組是否有被選取(val=3)，如果有被選取則顯示->訪客報名啟用註冊功能欄位

如果沒有被選取則隱藏->訪客報名啟用註冊功能欄位

code如下說明

//html結構

<span id='helpBlock' class='help-block'>選擇可報名群組</span>
<select class='form-control' id='browsegroup' name='browsegroup[]' multiple >
<option value=1 data-id=1 >管理員</option>
<option selected='selected' value=2 data-id=2 >註冊會員</option>
<option selected='selected' value=3 data-id=3 >訪客</option>
</select>


<div class='col-sm-12' id='registerbox'>
<label class='col-sm-6'><span id='helpBlock' class='help-block'>訪客報名啟用註冊功能</span> </label>
<div class='col-sm-6'><label class='radio-inline'>
<input class='' type='radio' id='' name='register' value='0'>不啟用
</label><label class='radio-inline'>
<input class='' type='radio' id='' name='register' checked=checked value='1'>啟用
</label></div>
<br /></div>


<script>canregisterforvisitors();</script>



//js結構

//判斷可報名群組是否有訪客
function canregisterforvisitors() {
//取得#registerbox區塊html內容
var $registerhtml = $("#registerbox").html();
//預設值
selectedval($registerhtml);
//選單操作值
$("body").on("change", "#browsegroup", function() {
selectedval($registerhtml);
})
}

function selectedval($registerhtml) {
var $selected = new Array();
//遍歷selected
$('#browsegroup :selected').each(function(i, sel) {
$selected[i] = $(sel).val();
});
if ($.inArray('3', $selected) == -1) {
//群組無訪客隱藏#registerbox區塊
$("#registerbox").hide().html("<input type='hidden' name='register' value='0'>");
} else {
//群組有訪客顯示#registerbox區塊帶入$registerhtml值
$("#registerbox").show().html($registerhtml);
}
}

這樣就可以了，有需要的朋友參考看看

工作心得撰寫：徐嘉裕 Neil hsu