排序Select中Option项的一个示例

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

Form中的Select控件不支持对选择项(Option)的排序,下面我将对Option中value属性值进行排序,并调整每个Option排序后的位置,具体代码如下(这里假设每个Option中的value与其中的text内容相同):

该函数运用了Array(数组)对象的排序(sort)方法,实现了Select排序

function sortMe(oSel){
var ln = oSel.Options.length;
var arr = new Array(); // 这是关键部分

// 将Select中的所有Option的value值将保存在Array中
for (var i = 0; i < ln; i++)
{

  // 如果需要对Option中的文本排序,可以改为arr[i] = oSel.Options[i].text;
  arr[i] = oSel.Options[i].value;

}

arr.sort(); // 开始排序

// 清空Select中全部Option

while (ln--)
{
  oSel.Options[ln] = null;
}

// 将排序后的数组重新添加到Select

for (i = 0; i < arr.length; i++)
{
  oSel.add (new Option(arr[i], arr[i]));
}
}
</script>

下面的示例演示了一个按升序排序Select

 

<Select id=sort_test> <Option value=bathroom Selected>bathroomOption> <Option value=article>articleOption> <Option value=bath>bathOption> <Option value=art>artOption> <Option value=CuteHtml>cuteHtmlOption> <Option value=cute>cuteOption>Select> <script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
文章标签: function null
个人分类: delphi javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭