jquery 对多行select 的操作

<!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=utf-8" />
<title></title>
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">

</style>
<script language="javascript">
  $(function(){
   //设置焦点
   $("#key").focus();
   //添加关键字
   $("#add").click(function(){
    var jq_key_value = $("#key").val();
    if(jq_key_value.length > 0){

     //验证是否已经添加1（繁琐）
     /*var flag_exsit = false;
     $("#keys option").each(function(){
      if($(this).val()==jq_key_value){
       alert("该关键词已添加！");
       flag_exsit = true;
      }
     });
     if(!flag_exsit){
      $("#keys").append("<option value='"+jq_key_value+"'>"+jq_key_value+"</option>");
     }*/
     //验证是否已经添加2（简易）
     if(!$("#keys option[value="+jq_key_value+"]").length){
      $("#keys").append("<option value='"+jq_key_value+"'>"+jq_key_value+"</option>");
     }else{
      alert("该关键词已添加！");
     }
     //清空
     $("#key").attr("value","");
     //设置焦点
      $("#key").focus();
    }else{
     alert("请输入关键字！");
    }
   });
   //删除选中
   $("#delete").click(function(){
    if($("#keys option:selected").length >0){
     if(confirm("确定要删除？")){
      $("#keys option:selected").remove();
     }

    }else{
     alert("请选中要删除的关键字！");
    }
   });
   //显示所有
   $("#show").click(function(){
    if($("#keys option").length >0){
     var str = "";
      $("#keys option").each(function(){
       //$("#keys :selected").each(function(){
       str += $(this).val()+ "\r\n";
      });
      alert(str);
    }else{
     alert("没有关键词可以显示")
    }
   });
   //清空
   $("#clear").click(function(){
     $("#keys").empty();
   });

  })
  </script>
</head>
<body>
<table align="center">
<tr>
  <td>关键词</td>
  <td><input type="text" id="key" /></td>
  <td align="center"><input id="add" type="button" value="添加" /></td>
</tr>
<tr>
  <td>关键词列表</td>
  <td colspan="2">
   <select id="keys" multiple="multiple" style="height:100px;width:240px">
   </select>
  </td>
</tr>
<tr>
  <td></td>
  <td align="left"><input id="delete" type="button" value="删除选中" />      <input id="clear" type="button" value="清空" /></td>
  <td align="center"><input id="show" type="button" value="显示所有" /></td>
</tr>

</table>
</body>
</html>

来源：https://www.cnblogs.com/shuaisam/archive/2012/03/27/2419345.html

标签

keys

select

jquery