html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月1日 星期四

下拉選單之排序 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>

沒有留言:

張貼留言