javascript 能否隐藏select

有select1 3个值：ERP,OA,EAS
ERP有值（1,2,3,4,5,6）
OA有值(7,8,9,10,11)
EAS有值(12,13,14,15,16)
select2 根据select1选择的值显示ERP,OA,EAS里面的值，在一个静态页面实现。
问题1：ERP,OA,EAS,的值怎么隐藏？
问题2：select2怎么获取值？
请问高手还有其他方法吗？主要目的是当select1选择ERP、OA、EAS的任何一个的时候，select2中获取选择某一项（ERP、OA、EAS）的值？

解决方案 »

  1.   

    <!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>
    </head><body>
    <script type="text/javascript">
    var arr_ERP = new Array(1,2,3,4,5,6);
    var arr_OA = new Array(7,8,9,10,11);
    var arr_EAS = new Array(12,13,14,15,16);
    function changeSEL() {
    var val = document.getElementById('S1').value;
    var S2 = document.getElementById('S2');
    var arr = new Array();
    if (val == 'DEFAULT') S2.style.display = 'none';
    else {
    S2.style.display = '';
    var str = '';
    switch(val) {
    case 'ERP':
    arr = arr_ERP;
    break;
    case 'OA':
    arr = arr_OA;
    break;
    case 'EAS':
    arr = arr_EAS;
    break
    }
    for (var i = 0; i < arr.length; i ++) str += '<option value="' + arr[i] + '">' + arr[i] + '</option>\n';
    S2.innerHTML = str;
    }
    }
    </script><select id="S1" onchange="changeSEL();">
    <option value="DEFAULT">请选择</option>
    <option value="ERP">ERP</option>
    <option value="OA">OA</option>
    <option value="EAS">EAS</option>
    </select>
    &nbsp;
    <select id="S2" style="display:none;"></select>
    </body>
    </html>
      

  2.   

    S2.style.display = '';
    替换成： 
    S2.style.display = 'block';
      

  3.   

    本机测试通过<!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>
    </head><body>
    <script type="text/javascript">
    var arr_ERP = new Array(1,2,3,4,5,6);
    var arr_OA = new Array(7,8,9,10,11);
    var arr_EAS = new Array(12,13,14,15,16);
    function changeSEL() {
        var val = document.getElementById('S1').value;
        var S2 = document.getElementById('S2');
        var arr = new Array();    if (val == 'DEFAULT') S2.style.display = 'none';
        else {
            S2.style.display = '';
    var str = '';
            switch(val) {
                case 'ERP':
                    arr = arr_ERP;
                    break;
                case 'OA':
                    arr = arr_OA;
                    break;
                case 'EAS':
                    arr = arr_EAS;
                    break
            } if (S2.options.length!=0)
    {
    for (var i = 0; i < arr.length; i ++) S2.remove(0);
    }        for (var i = 0; i < arr.length; i ++){
    var S2Option=document.createElement('option');
    S2Option.value = arr[i];
    S2Option.text = arr[i];
    S2.add(S2Option,null);
    }
        }
    }
    </script><select id="S1" onchange="changeSEL();">
        <option value="DEFAULT">请选择</option>
        <option value="ERP">ERP</option>
        <option value="OA">OA</option>
        <option value="EAS">EAS</option>
    </select>
    &nbsp;
    <select id="S2" style="display:none;">
    </select>
    </body>
    </html>
      

  4.   

    这个不就是想省/市联动吗
    ERP有值（1,2,3,4,5,6）
    OA有值(7,8,9,10,11)
    EAS有值(12,13,14,15,16)ERP..相对于省,123456相对于市
      

  5.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
      <SCRIPT LANGUAGE="JavaScript">
      <!--
     $(function(){
     
    var data = {"rows":[
    {"text":"ERP","value":"ERP","items":[{"text":"1","value":1},{"text":"2","value":2},{"text":"3","value":3},{"text":"4","value":4},{"text":"5","value":5},{"text":"6","value":6}]}
    ,{"text":"OA","value":"OA","items":[{"text":"7","value":7},{"text":"8","value":8},{"text":"9","value":9},{"text":"10","value":10},{"text":"11","value":11}]}
    ,{"text":"EAS","value":"EAS","items":[{"text":"12","value":12},{"text":"13","value":13},{"text":"14","value":14},{"text":"15","value":15},{"text":"16","value":16}]}
    ]} initSelect1(data);

    selectEvent(data) })// 初始化select1
     function initSelect1(data){
    var rows = data.rows;
    var $select1 = $('#select1');
    for(var i in rows){
    var row = rows[i];
    $select1.append('<option value="'+row.value+'">'+row.text+'</option>');
    }
     }// 联动事件
     function selectEvent(data){
    var rows = data.rows;

    $('#select1').bind('change',function(){
    var val = $(this).val();

    for(var i in rows){
    if(rows[i].value == val){
    var cityItems = rows[i].items;
    bindSelect2Data(cityItems);
    break;
    }
    }
    });
     }// 设置select2数据
     function bindSelect2Data(items){
    var html = [];
    for(var j in items){
    html.push('<option value="'+items[j].value+'">'+items[j].text+'</option>');
    }
    //cityHtml.push("</select>")
    $('#select2').html(html.join(""))
     }  //-->
      </SCRIPT>
     </HEAD>
     <BODY>
    <select id="select1"></select> <select id="select2"></select> </BODY>
    </HTML>