記錄一下怎麼取得select 屬性為multiple時,且選擇多個value時,javascript要如何取得所有被選擇的option的value。

<script>
function deleteClick()
{

   if(document.form.WdsEnabled[0].checked = true)
document.form.wlanWdsEnabled.value="ON";
   else
document.form.wlanWdsEnabled.value="OFF";

   var selected = new Array();
  必須先宣告一個陣列的變數來存放所有被選擇的option的value。

   var mySelect = document.form.elements["WDSList"];  
  WDSList即是multiple的select的元件

   var delWDSentry="";
        由於我要根據所選擇的option value動態產生hidden的input欄位在<div id="delMac"></div>中,所以必須宣告一個變數來存放所需新增的input 欄位的html語法。

   while(mySelect.selectedIndex != -1)  當select中沒有任何的option時,mySelect.selectedIndex就會是-1,所以此判斷式,是確保select中有option
   {
      if(mySelect.selectedIndex != 0)       這個if 判斷式必須要mark掉才能夠取得第1個option的值
      {
         selected.push(mySelect.options[mySelect.selectedIndex].value);  selected.push是表示把選擇的這個index的value存放到selected這個陣列中。若選擇的是test2與test4,則selected[0]=2,而selected[1]=4。
      }

      mySelect.options[mySelect.selectedIndex].selected = false;
   }

   for(var i = 0; i < selected.length; i++)
   {
 
if (i==0)
delWDSentry = "<input type=\"hidden\" value=\"ON\" name=\"select"+ selected[i]+"\">";
else
delWDSentry += "<input type=\"hidden\" value=\"ON\" name=\"select"+ selected[i]+"\">";
alert(delWDSentry);
   }

document.getElementById('delMac').innerHTML=delWDSentry;


  if ( !confirm('Do you really want to delete the selected entry?') ) {
return false;
  }
  else
return true;
}
</script>
</head>
<body>
<form name="form">
<input type="hidden" name="wlanWdsEnabled" value="">
<div id="delMac" name="delMac" "display:none;"></div>

<input type="radio" name="WdsEnabled" value="ON">ON
<input type="radio" name="WdsEnabled" value="OFF">OFF
<select size="8" id="WDSList" name="WDSList" multiple="true" class="input" style="vertical-align:middle; width:150px;">
      <option value=1>test1</option>
      <option value=2>test2</option>
      <option value=3>test3</option>
      <option value=4>test4</option>
 </select>
  <input class="button" type="submit" onClick="return deleteClick();" name="deleteSelWdsMac" value="Delete" size="12">

</form>
</body>
</html>
創作者介紹
創作者 Yisin 的頭像
Yisin

欣情巧克力

Yisin 發表在 痞客邦 留言(0) 人氣()