JS实用代码收集

精选转载

danni505 2008-09-18 16:29:17 博主文章分类：CoreJava

1、提交到新窗口：

2、动态绑定数组到下拉列表：

数据：

//#“银行”列表数据
var bank_datas = [['2','招商银行'],['15','上海银行'],['16','广东发展银行'],['17','深圳平安银行'],['18','中国银行'],['19','中国农业银行']
,['20','中国建设银行'],['21','中国工商银行'],['24','中国民生银行'],['25','交通银行']
,['26','兴业银行'],['27','宁波银行'],['28','中国光大银行'],['29','中信银行'],['30','北京银行'],['31','上海浦东发展银行']
,['32','华夏银行'],['33','深圳发展银行'],['34','花旗银行'],['35','渣打银行']];

调用：

            <select name="select4" id="select4">
             <option value="0">银行</option>
                <script language="javascript">
                getDatas_callback(bank_datas,"select4")
             </script>
            </select>

函数：

//#IE6 IE7能显示，FF不能显示
function     getDatas_callback2(res,name)
{
  //获得参数
  var     datas     = res;
  var     DropName =name;

  //用for循环给Select控件赋值
  for     (var     i=0;i<datas.length;i++)
  {
    oOption     =     document.createElement("OPTION");
    DropName.options.add(oOption);
    oOption.innerText     =     datas[i];
    oOption.value     =     datas[i];
  }
}

或者用：

//#静态输出以增强通用性（数据为二维数组）
function    getDatas_callback(res,name)
{
  //获得参数
  var     datas     = res;
  var     DropName = name;
  //用for循环给Select控件赋值
  for     (var     i=0;i<datas.length;i++)
  {
    document.write("<option value="+datas[i][0]+">"+datas[i][1]+"</option>");
  }
}

3、单击下拉列表的实现整个div的切换

JS文件：

//#搜索栏“信用卡”和“贷款”的切换
function exchange(obj)
{
  var index=obj.value;
  //显示贷款
  if(index=="1")
  {
    //隐藏信用卡搜索栏
    var obj1=document.getElementById("card");
    obj1.style.display="none";
    //显示贷款搜索栏
    var obj2=document.getElementById("loan");
    obj2.style.display="";
    //设置下拉列表值为“贷款”
    var obj3=document.getElementById("select5");
    obj3.options[0].selected = false;
    obj3.options[1].selected = true;
    obj1=null;
    obj2=null;
    obj3=null;
  }
  //显示信用卡
  if(index=="0")
  {
    //隐藏贷款搜索栏
    var obj4=document.getElementById("loan");
    obj4.style.display="none";
    //显示信用卡搜索栏
    var obj5=document.getElementById("card");
    obj5.style.display="";
    //设置下拉列表值为“贷款”
    var obj6=document.getElementById("select1");
    obj6.options[0].selected = true;
    obj6.options[1].selected = false;
    obj4=null;
    obj5=null;
    obj6=null;
  }
  obj=null;
}

//#静态输出以增强通用性
function    getDatas_callback(res,name)
{
  //获得参数
  var     datas     = res;
  var     DropName = name;
  //用for循环给Select控件赋值
  for     (var i=0;i<datas.length;i++)
  {
    document.write("<option value="+datas[i][0]+">"+datas[i][1]+"</option>");
  }
}

HTML代码：

<div align="right" id="card">
            <select id="select1" name="select1" onchange="exchange(this)" >
                    <option value="0" >信用卡</option>
                    <option value="1">贷款</option>
            </select>

            <select id="select2" name="select2"    >
                    <option value="0" selected    >年费</option>
                    <option value="1" >180元以下</option>
                    <option value="2">180-360元</option>
                    <option value="3">360元以上</option>
            </select>

            <select name="select3" id="select3">
        <script language="javascript">
        getDatas_callback(card_datas,"select3")
        </script>
            </select>

            <select id="select4" name="select4">
                <script language="javascript">
                getDatas_callback(bank_datas,"select4")
             </script>
            </select>

</div>
<div align="right" id="loan" style="display:none;">
            <select id="select5" name="select5" onchange="exchange(this)">
                    <option value="0"    >信用卡</option>
                    <option value="1"    >贷款</option>
            </select>

            <select id="select6"    name="select6">
                    <option value="0" selected >贷款属性一</option>
                    <option value="1"    >180元以下</option>
            </select>
</div>

4、利用Jquery传送post数据

//#post datas
function postdatas()
{
  //         $.blockUI('正在提交数据...');
  var select1 = $('#select1').val();
  var select2 = $('#select2').val();
  var select3 = $('#select3').val();
  var select4 = $('#select4').val();
  var params = {
    select1 : select1,
    select2 : select2,
    select3 : select3,
    select4 : select4
  };

  $.post("./topsearch/?Command=Index",params,function(){
    alert("数据发送成功过");
    window.location.href="./topsearch";
  });

}

当然要先引用Jquery的库。

5.取得checkbox组的选中数目

<SCRIPT>
    function check()
    {
  var index=0;
  for(i=1;i<9;i++)
    {
    if(document.getElementById("idcheckbox"+i).checked == true)
      index++;
         }
    if(index==0){
            alert("没有选中记录！");
    }else{
      alert("选中的数目为："+index);
    }
    }

</SCRIPT>

<input name="idcheckbox1" id="idcheckbox1" type="checkbox" >1</br>
<input name="idcheckbox2" id="idcheckbox2" type="checkbox" >2</br>
<input name="idcheckbox3" id="idcheckbox3" type="checkbox" >3</br>
<input name="idcheckbox4" id="idcheckbox4" type="checkbox" >4</br>
<input name="idcheckbox5" id="idcheckbox5" type="checkbox" >5</br>
<input name="idcheckbox6" id="idcheckbox6" type="checkbox" >6</br>
<input name="idcheckbox7" id="idcheckbox7" type="checkbox" >7</br>
<input name="idcheckbox8" id="idcheckbox8" type="checkbox" >8</br>

<input value="测试一" onClick=" check();" type="button" >