根据文本框内容禁用下拉列表

在线预览。<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        .select{ display:none;}
    </style>
</head>
<body>
<p>
    <input name="e" id="e" value="1"/>
</p>
<p>
    <select name="1" id='1' class="select">
        <option>1</option> <option>2</option> <option>3</option>
    </select>
    <select name="a" id="2" class="select">
        <option>a</option> <option>b</option> <option>c</option>
    </select>
    <select name="yi" id="3" class="select">
        <option>yi</option> <option>er</option> <option>san</option>
    </select>
</p>
<script>
    $('#e').blur(function(){
        tab(parseInt($(this).val()) - 1);
    });
    function tab(n){
        $('.select').hide().eq(n).show();
    }
</script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
            select{
                display: none;
            }
        </style>
    </head>
    <body>
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <p>
        <input name="e" id="e" value=""/>
    </p>
    <p> <select name="1" id='1'>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
        <select name="a" id="2" >
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select>
        <select name="yi" id="3" >
            <option>yi</option>
            <option>er</option>
            <option>san</option>
        </select>
    </p>
    <script>
        var input=document.getElementById('e'),
                arr=[],
                preSelect=null;
        [].push.apply(arr,document.getElementsByTagName('select'));
        input.onchange=function(){
            var value=(this.value<<0)-1,nowSelect=arr[value];
            if(nowSelect){
                nowSelect.style.display='inline';
                preSelect&&(preSelect.style.display='none');
                preSelect=nowSelect;
            }
        }
    </script>
    </body>
    </html>
    </body>
    </html>
      

  2.   

    我三个下拉列表的name是一样，虽然下拉列表被屏蔽了值似乎还在！！提交数据变成三个数据了。
      

  3.   

    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <p> 
      <input name="e" id="e" value="1"/>
    </p>
      <p> <select name="a">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <select name="a">
          <option>a</option>
          <option>b</option>
          <option>c</option>
        </select>
        <select name="a">
          <option>yi</option>
          <option>er</option>
          <option>san</option>
        </select>
        </p>
    <script>
      function f(){ $('select[name=a]').hide().prop('disabled',true).eq(parseInt(this.value)-1).show().prop('disabled',false);
      }
      f.call($('#e').blur(f)[0]);
    </script>