✍ 📁 🙈 🙉 🙊 : Select option Sort

2022年4月17日星期日

Select option Sort

CSS overflow 控制捲軸

<b>Javascript to sort contents of select element</b><br><br>
<select id="Sel" >
    <option value="158.12 HK$">3 people</option>
    <option value="276.36 HK$">2 people</option>
    <option value="110.36 HK$">8 people</option>
    <option value="879.69 HK$">1 people</option>
    <option value="256.36 HK$">4 people</option>
</select>

select sort <br>
<input type="button" value="sort by HK$"  onclick="sortMe('value')">
<input type="button" value="sort by people" onclick="sortMe('text')">

<pre><ol><li> <<c>script> 
<li> function sortMe(x){
<li> var tmpAry = new Array();
<li>    for (var i=0; i<5 ;i++) {
<li>        tmpAry[i] = new Array();
<li>           if(x=='text' ){ tmpAry[i][0] = Sel[i].text;
<li>                        tmpAry[i][1] = Sel[i].value; }
<li>            if(x=='value' ){ tmpAry[i][0] = Sel[i].value;
<li>                        tmpAry[i][1] = Sel[i].text; }
<li>      }

<li> tmpAry = tmpAry.sort() ;
<li>   for (var ii=0; ii<5 ;ii++) {
<li>         if(x=='text' ){ Sel[ii].text  = tmpAry[ii][0] ;
<li>                         Sel[ii].value = tmpAry[ii][1] ;}
<li>         if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ;
<li>                         Sel[ii].text  = tmpAry[ii][1] ;}
<li>        }
<li> }
<li> <<c>/script>

</pre>

Tt += '</pre>' ;
DP.innerHTML =Tt ;
}
DPhtml() ;
</script>

tmpAry = tmpAry.sort() ;
   for (var ii=0; ii<5 ;ii++) {
         if(x=='text' ){ Sel[ii].text  = tmpAry[ii][0] ;
                         Sel[ii].value = tmpAry[ii][1] ;}
         if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ;
                         Sel[ii].text  = tmpAry[ii][1] ;}
 DPhtml() ; }
}
</script>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

Edit

#html #網頁格式 #script #style #div

✍ 📁 🙈 🙉 🙊

2022年4月17日星期日