具有一个#id的多选选项可显示n个隐藏表


multiple select option with one #id to show n hide table

我对select选项有问题。我想用具有相同id的many-select选项显示n隐藏我的表ndiv,但结果仅在first-select选项中有效。我真的需要你的帮助,这样我所有的选择都可以使用相同的id。帮帮我,伙计们。。!…

      <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>

尝试

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

通常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>

现在使用代码通过their class名称获取select元素来进行处理:

<script type="text/javascript">
      $('select.form-select').change(function() {
                $('div.number').hide();
                $('table.number').hide();
                $('#number' + $(this).val()).show();
          });
</script>