radio标签代码如下:<td>
<input type="radio" name="region"  value="south" checked="checked"/>南
<input type="radio" name="region"  value="north"/>北
</td>
<select name="region3"  id="options1" size="1">
<option value="竹">竹</option>
<option value="海">海</option>
<option value="丁">丁</option>                    
</select>这里有两个radio元素,默认选中的是“南”,希望改选为“北”或由“北”改选为“南”的话,自动更改select标签中所有option的值,使之由三个option变为两个option,且值分别为“东”和“西”,该如何实现?

解决方案 »

  1.   

    设radio的class为"xiaoqu"$(".xiaoqu").change(function(){
      
    });
      

  2.   


    <script type="text/javascript">
      $(function () {
        $(":radio[name='region']").change(function(){
          var option = $("#options1")[0].options;
          option[0].text = "东";
          option[1].text ="西";
          option.length = 2;
        });
      })
    </script>
      

  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=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function init(){
       var rs=document.getElementsByName("region");
       for(var i=0;i<rs.length;i++){
        rs[i].onclick=change;
       }
    }
    function change(){
    var se=document.getElementById("options1");
    se.length=0;
    if(this.getAttribute("value")=="south"){
         var o1=new Option("竹","竹");
     var o2=new Option("海","海");
     var o3=new Option("丁","丁");
     se[0]=o1;
     se[1]=o2;
     se[2]=o3;
    }else{
     var o1=new Option("东","东");
     var o2=new Option("西","西");
     se[0]=o1;
     se[1]=o2;
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <input type="radio" name="region"  value="south" checked="checked"/>南
    <input type="radio" name="region"  value="north"/>北
    <select name="region3"  id="options1" size="1">
    <option value="竹">竹</option>
    <option value="海">海</option>
    <option value="丁">丁</option>                    
    </select>
    </body>
    </html>
    这样试试
      

  4.   

    不用太复杂。简单的就Ok了。
    <!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>
     <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
       radioBindEvent();
      });
      function radioBindEvent(){
      $("input[type='radio'][name='region']").bind("change",function(){
        $("#options1").html('<option value=\"东\">东</option>\n<option value=\"西\">西</option>');
      });
      }
    </script>
    </head>
    <body>
    <input type="radio" name="region" value="south" checked="checked"/>南
    <input type="radio" name="region" value="north"/>北
    <select name="region3" id="options1" size="1">
    <option value="竹">竹</option>
    <option value="海">海</option>
    <option value="丁">丁</option>  
    </select>
    </body>
    </html>
      

  5.   

    优化为以下方案,希望对楼主有所帮助!!!<!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 type="text/javascript" src="js/jquery/jquery-1.7.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
       var str1 = '<option value=\"东\">东</option>\n<option value=\"西\">西</option>';
    var str2 = '<option value=\"竹\">竹</option><option value=\"海\">海</option><option value=\"丁\">丁</option>';
      
    //初始化
    $("#options1").html(str2);
      
    //选择‘北’
       $("input[type='radio'][name='region'][value='north']").bind("change",function(){
       $("#options1").html(str1);
       });

    //选择‘南’
    $("input[type='radio'][name='region'][value='south']").bind("change",function(){
       $("#options1").html(str2);
       });
      });
    </script>
    </head>
    <body>
    <input type="radio" name="region" value="south" checked="checked"/>南
    <input type="radio" name="region" value="north"/>北
    <select name="region3" id="options1" size="1"></select>
    </body>
    </html>
      

  6.   

    楼主,你知道为什么会这么多热心的人帮你贴代码吗?而且是这么完整的代码其实你这个问题非常非常的简单,就是先清空select的options。再重新添加就解决了关键是你给的分啊100分啊我怎么感觉像富二代啊一般这种问题最多最多也就值个20分。。
    嘿嘿!