通过一个主下拉框控制多个下拉框

时间:2014-03-13 15:32:18

标签: javascript jquery html ajax

我正在尝试创建一个控制多个下拉框的主下拉框。这个多循环框在循环中创建,所以我需要动态脚本,它适用于类或id。

示例 -

<form method="post" name="postage">
Select All      
      <select id="options1" name="se1"  >
            <option value="0" >-- Select --</option>
            <option value="Royal Mail">Royal mail</option>
            <option value="USP courier">USP courier</option>
            <option value="Standard courier">Standard courier</option>
            <option value="DHL courier">DHL courier</option>
      </select>

Select Manually-       
       <select id="options2" name="se2"  >
            <option value="0" >-- Select --</option>
            <option value="Royal Mail">Royal mail</option>
            <option value="USP courier">USP courier</option>
            <option value="Standard courier">Standard courier</option>
            <option value="DHL courier">DHL courier</option>
      </select>
        <select id="options3" name="se3"  >
            <option value="0" >-- Select --</option>
            <option value="Royal Mail">Royal mail</option>
            <option value="USP courier">USP courier</option>
            <option value="Standard courier">Standard courier</option>
            <option value="DHL courier">DHL courier</option>
      </select>
        <select id="options3" name="se4"  >
            <option value="0" >-- Select --</option>
            <option value="Royal Mail">Royal mail</option>
            <option value="USP courier">USP courier</option>
            <option value="Standard courier">Standard courier</option>
            <option value="DHL courier">DHL courier</option>
      </select>
 <input type="submit" name="submit_result" />
</form>

我发现了一个脚本,但我不知道在哪里更改 -

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
$('.west-yorkshire').change(function({
     var value = $(this).val();
      $('.className').each(function(
       $(this).val(value);
        alert(value);
     ));
}));
}//]]>  

</script>

1 个答案:

答案 0 :(得分:0)

这是你想要达到的目标吗? http://jsfiddle.net/9R9DV/2/

更改了一些JS代码

 $(document).ready(function(){
     $('#options1').change(function(){
     var value = $(this).val();
     $('.manual').each(function(){
       $(this).val(value);
     });
 });

});

和HTML代码的类

 <select class="manual" id="options2" name="se2"  >
 ...
 <select class="manual" id="options3" name="se3"  >
 ...