多个选择选项与一个#id显示n隐藏表

我有一个关于选择选项的问题。我想显示n隐藏我的表格n div与我的许多选择相同的ID选项，但结果只在第一选择选项有效。我真的需要你的帮助，以便我所有的选择选项都使用相同的ID。帮助我们......！ ...多个选择选项与一个#id显示n隐藏表

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript"> 
     $(function() { 
      $('#sts').change(function() { 
       $('div.number').hide(); 
       $('table.number').hide(); 
       $('#number' + $(this).val()).show(); 
      }).change(); 
    }); 
</script>

...

<select name="" id="sts" class="form-select required"> 


    <option value="">- select -</option> 

    <option value="1">Option 1</option> 

    <option value="2">Option 2</option> 

    <option value="3">Option 3</option> 

    <option value="4">Option 4</option> 
    </select> 

    <select name="" id="sts" class="form-select required"> 

    <option value="">- select -</option> 

    <option value="1">Option 1</option> 

    <option value="2">Option 2</option> 

    <option value="3">Option 3</option> 

    <option value="4">Option 4</option> 
    </select> 

    <div id="number1" class="number">Option 1</div> 

    <div id="number2" class="number">Option 2</div> 
    <div id="number3" class="number">Option 3</div>

来源

2012-07-18 wasis

同** **号对于多个元素将导致** id **碰撞。尝试为此使用名称属性。 – 2012-07-18 05:31:13

尝试

$('*#sts').change(function() {...});

来源

2012-07-18 06:01:22

通常一个HTML元素的id属性必须是唯一的。所以，请更改代码以

<select name="" id="sts" class="form-select required"> 


    <option value="">- select -</option> 

    <option value="1">Option 1</option> 

    <option value="2">Option 2</option> 

    <option value="3">Option 3</option> 

    <option value="4">Option 4</option> 
    </select> 

    <select name="" id="sts1" class="form-select required"> 

    <option value="">- select -</option> 

    <option value="1">Option 1</option> 

    <option value="2">Option 2</option> 

    <option value="3">Option 3</option> 

    <option value="4">Option 4</option> 
    </select> 

    <div id="number1" class="number">Option 1</div> 

    <div id="number2" class="number">Option 2</div> 
    <div id="number3" class="number">Option 3</div>

现在使用的代码通过获取select元素做处理通过their class名称：

<script type="text/javascript"> 
     $('select.form-select').change(function() { 

       $('div.number').hide(); 
       $('table.number').hide(); 
       $('#number' + $(this).val()).show(); 
      }); 
</script>

来源

2012-07-18 05:25:23 Prabhuram

多个选择选项与一个#id显示n隐藏表

回答

相关问题