window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

下拉選單之排序 Select option Sort

下拉選單之排序 Select option Sort

SELECT元素物件.sort(),將陣列中的元素排列至其應當的位置上並返回此陣列。排列不必是穩定的。預設的排列順序根據Unicode字串碼位來排序。
SELECT元素物件.reverse() ,將陣列反轉。陣列中第一個元素變成最後一個, 最後一個變成第一個。

未排序 SELECT 排序 之後SELECT

value

value

<table border="1" cellpadding ="2" width="100%">
<tbody>
<tr>
<td width="50%">
未排序 SELECT
</td><td>
排序 之後SELECT <br />
<input type="button" value="順排序" onclick="sortMe('順')">
<input type="button" value="逆排序" onclick="sortMe('逆')">
</td></tr><td>
<SELECT select style="width:100%" onchange="document.getElementById('DP1').innerHTML='your select value is '+this.value"  size="8">
    <OPTION value="3 位人士">3 位人士</OPTION>
    <OPTION value="2 位人士">2 位人士</OPTION>
    <OPTION value="0 位人士">0 位人士</OPTION>
    <OPTION value="1 位人士">1 位人士</OPTION>
    <OPTION value="4 位人士">4 位人士</OPTION>

</SELECT> <br />
<span id="DP1">value</span>
</td><td>

<SELECT id="sel_sort" style="width:100%" onchange="document.getElementById('DPid').innerHTML='your select value is '+this.value"  size="8">
    <OPTION value="0 位人士">0 位人士</OPTION>
    <OPTION value="1 位人士">1 位人士</OPTION>
    <OPTION value="2 位人士">2 位人士</OPTION>
    <OPTION value="3 位人士">3 位人士</OPTION>
    <OPTION value="4 位人士">4 位人士</OPTION>
</SELECT> <br />
<span id="DPid">value</span>
</td></tr><tbody></table>

<script type="text/javascript">
function sortMe(UD){
var sel=document.getElementById('sel_sort');
var option = document.createElement('option');
var arrT = new Array();
var arrTV = new Array();
var TV = 0;
for (var i = 0; i < sel.options.length; i++){
       arrT [i]  = sel.options[i].text;
       arrTV [TV] = sel.options[i].text;TV++;
       arrTV [TV] = sel.options[i].value;TV++;}

arrT.sort();
if(UD == '逆'){arrT.reverse(); }

sel.options.length=0;

for (i = 0; i < arrT.length ; i++){
        option = document.createElement( 'option' );
        option.text= arrT[i];
        option.value=  arrTV [arrTV .indexOf (arrT[i])+1];
        sel.add( option );}
}
sortMe();
</script>

沒有留言:

張貼留言