如何修复三重下拉菜单

编辑：

随着问题的改变，编辑我的全部答案。由于您只想让用户选择基于另一个选择当前值的选项。

首先，我将terrSelect和locSelect设置为disabled作为默认值。因此，用户必须首先选择一个orgSelect。当orgSelect发生变化时，我们将启用terrSelect。然后，我们循环遍历所有terrSelect子元素，并禁用那些与locSelect的值不匹配的子元素。然后对locSelect:重复相同的过程

<form action="#" class="cascadeTest">
  <table>
    <tr>
      <th>Organization:</th>
      <td>
        <select name="orgSelect" class="orgSelect">
          <option value="0">Select an Organization</option>
          <option value="1">Organization 1</option>
          <option value="2">Organization 2</option>
          <option value="3">Organization 3</option>
        </select>
      </td>
    </tr>
    <tr>
      <th>Territory:</th>
      <td>
        <select name="terrSelect" class="terrSelect" disabled="disabled">
          <option value="0" class="static">- All Territories -</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1</option>
          <option value="2" class="sub_1">Organization 1 - Territory 2</option>
          <option value="3" class="sub_2">Organization 2 - Territory 1</option>
          <option value="4" class="sub_2">Organization 2 - Territory 2</option>
          <option value="5" class="sub_3">Organization 3 - Territory 1</option>
          <option value="6" class="sub_3">Organization 3 - Territory 2</option>
          <option value="7" class="sub_3">Organization 3 - Territory 3</option>
        </select>
      </td>
    </tr>
    <tr>
      <th>Location:</th>
      <td>
        <select name="locSelect" class="locSelect" disabled="disabled">
          <option value="0" class="static">- All Locations -</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1 - Location 1</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1 - Location 2</option>
          <option value="2" class="sub_2">Organization 1 - Territory 2 - Location 1</option>
          <option value="2" class="sub_2">Organization 1 - Territory 2 - Location 2</option>
          <option value="3" class="sub_3">Organization 2 - Territory 1 - Location 1</option>
          <option value="3" class="sub_3">Organization 2 - Territory 1 - Location 2</option>
          <option value="4" class="sub_4">Organization 2 - Territory 2 - Location 1</option>
          <option value="5" class="sub_5">Organization 3 - Territory 1 - Location 1</option>
          <option value="6" class="sub_6">Organization 3 - Territory 2 - Location 1</option>
          <option value="7" class="sub_7">Organization 3 - Territory 3 - Location 1</option>
        </select>
      </td>
    </tr>
  </table>
</form>
<script>
    $('.orgSelect').change(function(){
        selected = $(this).val();
        $('.terrSelect').removeAttr('disabled');
        $('.terrSelect').children('option').each(function(){
            if( !$(this).hasClass( 'sub_'+selected ) ){
                $(this).attr('disabled','disabled');
            }
            else {
                $(this).removeAttr('disabled');
            }               
        });
    });
    $('.terrSelect').change(function(){
        selected = $(this).val();
        $('.locSelect').removeAttr('disabled');
        $('.locSelect').children('option').each(function(){
            if( !$(this).hasClass( 'sub_'+selected ) ){
                $(this).attr('disabled','disabled');
            }
            else {
                $(this).removeAttr('disabled');
            }
        });
    }); 
</script>

这是你们朋友说的我不能用其他内容填充值

看看我的朋友我想要所有的代码如下：

<option value="1" class="sub_3">hello</option>

更改为：

 <option value="hello" id="1" class="sub_1">hello</option>

值将填充其他内容，如hello，值中的数字将填充其他id，脚本