用JS做了个ListBox的简单功能

最新推荐文章于 2022-10-25 02:43:02 发布

好吃的松子

最新推荐文章于 2022-10-25 02:43:02 发布

阅读量547

点赞数

分类专栏： JavaScript 文章标签： output input button javascript border

本文链接：https://blog.csdn.net/husheng86/article/details/3173355

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这段时间在项目组都是做静态页面，都是些复制粘贴的活，难得碰到个稍微有点难度的页面。后来看到这个页面还不错，可以自己做做看，虽然公司已经有这样的组件，但不想用，反正没什么事，就当多学学JS好了。

页面效果如下：

代码也贴出来跟大家分享：

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function addIt(){
   var input = document.getElementById("input");
   var output = document.getElementById("output");
   for(i = 0; i < input.length; i ++ )   {
      if(input[i].selected == true)      {
         if( output.length == 0){
            var option = new Option();
            option.text = input[i].innerText;
            output.add(option);
         }
         var isExist = false;
         for(j = 0; j < output.length; j ++ ){
            if (output[j].text ==  input[i].innerText){
               isExist = true;
               break;
            }
         }
         if (isExist == false){
            var option = new Option();
            option.text = input[i].innerText;
            output.add(option);
         }
      }
   }
}
function deleteIt(){
    var output = document.getElementById("output");
    for(i = 0; i<output.length; i++){
        if (output[i].selected == true){
            output.options.removeChild(output[i--]);
        }
    }
}
// -->
</script>
<table width="80%" border="0" align="center" style="margin-top:20px;">
  <tr>
    <td align="right">
      <select name="input" size="10" multiple="multiple" id="input" style="width:200px; font-size:16px">
        <option>美元/英镑</option>
        <option>美元/港币</option>
        <option>美元/新加坡元</option>
        <option>美元/日元</option>
        <option>美元/加拿大元</option>
        <option>美元/欧元</option>
      </select>
    </td>
    <td align="center">
      <p>
        <input type="button" name="Submit" value="增  加" onclick="addIt()"/>
      </p>
      <p>
        <input type="button" name="Submit2" value="删  除" onclick="deleteIt()"/>
      </p>
    </td>
    <td>
      <select name="output" size="10" multiple="multiple" id="output" style="width:200px; font-size:16px">
      </select>
    </td>
  </tr>
</table>
</body>
</html>
 

好吃的松子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS做了个ListBox的简单功能

这段时间在项目组都是做静态页面，都是些复制粘贴的活，难得碰到个稍微有点难度的页面。后来看到这个页面还不错，可以自己做做看，虽然公司已经有这样的组件，但不想用，反正没什么事，就当多学学JS好了。页面效果如下：代码也贴出来跟大家分享：html xmlns="http://www.w3.org/1999/xhtml"
复制链接

扫一扫

专栏目录