新增/移除select內的option

在這邊記錄一下 Javascript 如何新增 / 移除 select 內的 option

<input type="text" id="myText">
<input type="button" value="Add text to select"
      onclick="AddText()">
<br>
<select id="mySelect"></select>
<br>
<input type="button" value="Remove text from select"
      onclick="RemoveOption()">

<script language="javascript">
   function AddText()
   {
      var myText = document.getElementById("myText");
      var mySelect = document.getElementById("mySelect");
      var NewOption = document.createElement("option");
      NewOption.text = myText.value;
      NewOption.value = myText.value;
      try {
         mySelect.add(NewOption,null); //其他瀏覽器
      }
      catch (ex) {
         mySelect.add(NewOption); //IE
      }
   }

   function RemoveOption()
   {
      var mySelect = document.getElementById("mySelect");
      for (i=mySelect.options.length-1; i>=0; i--)
      {   //倒過來移除 options
         if (mySelect.options[i].selected)
            mySelect.remove(i);
      }
   }
</script>

兩個複選下拉選單互相搬移 option 的 Sample

<table border="0">
   <tr>
      <td>
         <select id="LeftPool" multiple size="5">
            <option value="1">Line 1</option>
            <option value="2">Line 2</option>
            <option value="3">Line 3</option>
         </select>
      </td>
      <td align="center">
         <input type="button" value=" → "
            onclick="MoveOption('LeftPool', 'RightPool')">
         <br><br>
         <input type="button" value=" ← "
            onclick="MoveOption('RightPool', 'LeftPool')">
      </td>
      <td>
         <select id="RightPool" multiple size="5">
         </select>
      </td>
   </tr>
</table>

<script language="javascript">
   function MoveOption(FromPool, ToPool)
   {
      var FromPool = document.getElementById(FromPool);
      var ToPool = document.getElementById(ToPool);
      for (i=0; i<FromPool.options.length; i++)
      {
         if (FromPool.options[i].selected)
         {
            var NewOption = document.createElement("option");
            NewOption.text = FromPool.options[i].text;
            NewOption.value = FromPool.options[i].value;
            try {
               ToPool.add(NewOption,null);
            }
            catch (ex) {
               ToPool.add(NewOption);
            }
         }
      }
      for (i=FromPool.options.length-1; i>=0; i--)
      {
         if (FromPool.options[i].selected)
            FromPool.remove(i);
      }
   }
</script>

讓Checkbox 唯讀

因為Checkbox 沒辦法設定Readonly
如果將Checkbox 設定為Disabled , 則Server 又接不到Checkbox 的值
上網查了一下解決的方法
在此記錄一下

<input type="checkbox" checked onclick="return false;">必選選項

正規表達式彙整

順便整理一下 javascript / vbscript (ASP) / C#
三者的正規表達式使用方式

	javascript
宣告	var RegObj = /pattern/attribute;
屬性	i: case-insensitive / g: global / m: multiline matching
比對	RegObj.test(target_string); return true / false
取出 符合文字	var Result = RegObj.exec(target_string); 搭配g, 可以重複使用exec(), 依序取出符合文字
取代 符合文字	target_string.replace(RegObj,replace_string); return取代後的文字 搭配Global, 可以將所有符合的文字取代

參考 W3CSchools

	vbscript (ASP)
宣告	Set RegObj = new regexp RegObj.Pattern = pattern
屬性	RegObj.IgnoreCase = true | false RegObj.Global = true | false
比對	RegObj.test(target_string) return true / false
取出 符合文字	Set Result = RegObj.execute(target_string) return一個Collection, 以Result(0) 方式讀取 搭配Global, 可以取出所有符合的文字Collection
取代 符合文字	RegObj.replace(target_string,replace_string) return取代後的文字 搭配Global, 可以將所有符合的文字取代

參考 MSDN

	C#
宣告	Regex RegObj = new Regex(pattern[,attribute]);
屬性	RegexOptions.IgnoreCase / RegexOptions.Multiline ...
比對	RegObj.IsMatch(target_string); return true / false
取代 符合文字	RegObj.Replace(target_string,replace_string); return取代後的文字

參考 MSDN, mikesdotnetting

Javascript 更新畫面

前面寫了一篇 子頁更新母頁畫面(showModalDialog)
這邊來寫一下一般的更新畫面方式

[更新自己這頁]

<script language="javascript">
   //第一種方法 : history.go()
   history.go(0);
   //第二種方法 : window.location.reload()
   window.location.reload();
   //第三種方法 : window.location.href
   window.location.href = window.location.href;
</script>

[更新父頁]

<script language="javascript">
   /* 以window.open開出來的新視窗 */
   /* 父頁就是window.opener */
   window.opener.history.go(0);
   window.opener.location.reload();
   window.opener.location.href = window.opener.location.href;

   /* 以window.showModalDialog開出來的新視窗 */
   /* 父頁就是window.dialogArguments */
   /* (父頁的window.showModalDialog()第2個參數要傳入window) */
   window.dialogArguments.history.go(0);
   window.dialogArguments.location.reload();
   window.dialogArguments.location.href =
                  window.dialogArguments.location.href;
   //其中,IE8針對showModalDialog好像只支援location.href的方式
</script>

Javascript 正規表達式

常常用到正規表達式
所以記錄一下在 Javascript 中的用法

<script language="javascript">
   var str = "46 Ladys and Gentleman~\nWelcome 12 to the show !";
   document.write("Test string : <br>" + str.replace("\n","<br>") + "<br><br>");
 
   var RegStr_NoGlobal = /\d/;
   /* 使用g(Global)參數時，RegExp在做test()或exec()時 */
   /* 會保存一個指標lastIndex，記錄上次查詢結束的位置。 */
   /* 第一次test()後，lastIndex就指向字串結尾 */
   /* 第二次test()由結尾開始查，啥都查不到，就傳回false，*/
   /* 然後再把lastIndex重設為0。 */
   var RegStr_Global = /\d/g;
   var RegStr_NoIgnoreCase = /wel/;
   var RegStr_IgnoreCase = /wel/i;
   var RegStr_NoMultiLine = /^Wel/;
   var RegStr_MultiLine = /^Wel/m;
   var RegStr_Variable = /[a-z]+([a-z]{2}) /gi;
 
   var result;
 
   result = RegStr_NoGlobal.exec(str);
   document.write("No-Global Round1 : " + result + "<br>");
   result = RegStr_NoGlobal.exec(str);
   document.write("No-Global Round2 : " + result + "<br>");
 
   result = RegStr_Global.exec(str);
   document.write ("Global Round1 : " + result + "<br>");
   result = RegStr_Global.exec(str);
   document.write ("Global Round2 : " + result + "<br><br>");
 
   result = RegStr_NoIgnoreCase.exec(str);
   document.write("No-IgnoreCase : " + result + "<br>");
 
   result = RegStr_IgnoreCase.exec(str);
   document.write("IgnoreCase : " + result + "<br><br>");
 
   result = RegStr_NoMultiLine.exec(str);
   document.write("No-MultiLine : " + result + "<br>");
 
   result = RegStr_MultiLine.exec(str);
   document.write("MultiLine : " + result + "<br><br>");
 
   result = RegStr_Variable.exec(str);
   document.write("Match string : " + result[0] + " , Match variable : " + result[1] + "<br>");
   result = RegStr_Variable.exec(str);
   document.write("Match string : " + result[0] + " , Match variable : " + result[1] + "<br>");
   result = RegStr_Variable.exec(str);
   document.write("Match string : " + result[0] + " , Match variable : " + result[1] + "<br>");
   result = RegStr_Variable.exec(str);
   document.write("Match string : " + result[0] + " , Match variable : " + result[1] + "<br>");
   result = RegStr_Variable.exec(str);
   document.write("Match string : " + result[0] + " , Match variable : " + result[1] + "<br>");
</script>

Javascript 動態增加陣列長度

記錄一下 Javascript 如何動態增加陣列長度
只要使用 splice function 就 ok 囉~

範例 :

<script language="javascript">
  /* Array.splice(要插入新元素的位置, */
  /*                     要刪除插入新元素位置後的舊元素個數, */
  /*                     新元素值1, */
  /*                     新元素值2, */
  /*                     ... )           */
   function Case1()
   {
       myArray = new Array(3);
       myArray[0] = "Row1";
       myArray[1] = "Row2";
       myArray[2] = "Row3";
       myArray.splice(myArray.length ,0 ,"Row4");
       /* result: Row1 Row2 Row3 Row4 */
   }

   function Case2()
   {
       myArray = new Array(3);
       myArray[0] = "Row1";
       myArray[1] = "Row2";
       myArray[2] = "Row3";
       myArray.splice(1 ,1 ,"Row4", "Row5");
       /* result: Row1 Row4 Row5 Row3 */
   }
</script>

子頁更新母頁畫面(showModalDialog)

最近頻繁地使用到 window.showModalDialog()
跳出子視窗新增 / 刪除資料, 再更新(Refresh)母視窗的畫面
所以這邊記錄一下當中做法

[showModalDialog 參數]

dialogHeight	dialogHeight=150px;
dialogWidth	dialogWidth=400px;
dialogLeft	dialogLeft=100px;
dialogTop	dialogTop=50px;
center	center=yes;
help	help=no;
resizable	resizable=no;
status	status=no;
scroll	scroll=yes;

子頁更新母頁:

[母頁.htm]

<script language="javascript">
   function OpenChild()
   {
      DialogParam = "dialogWidth=100px;dialogHeight=400px;";
      DialogParam += "status=no;resizable=no";
      window.showModalDialog("子頁.htm",window,DialogParam);
   }

   function RefreshPage()
   {
      var RefreshLink = document.getElementById("RefreshLink");
      RefreshLink.href = "母頁.htm";
      RefreshLink.click();
   }
</script>
<body>
   <a id="RefreshLink" style="display:none"></a>

[子頁.htm]

<script language="javascript">
   function RefreshParent()
   {
      window.dialogArguments.RefreshPage();
   }
</script>

ps.這種方式也適用於showModalDialog出來的視窗
再使用showModalDialog開新視窗
不過,第一個showModalDialog視窗頁面要加一行

<head>
   <base target="_self">

因為showModalDialog視窗預設所有Link都會另開視窗
加了這行後,點選更新畫面Link就會在自己這頁動作
不會另開視窗