combobox的onSelect三级联动用法

三级联动是指在选择第一级下拉框的选项后，第二级下拉框的选项会随之变化；在选择第二级下拉框的选项后，第三级下拉框的选项也会随之变化。在Combobox中实现三级联动可以通过以下步骤：

1. 绑定onSelect事件。在第一级下拉框中选择选项时触发该事件。

2. 在onSelect事件中获取第一级下拉框的选项值，并根据该值更新第二级下拉框的选项。

3. 同样在onSelect事件中获取第二级下拉框的选项值，并根据该值更新第三级下拉框的选项。

以下是一个基于jQuery的示例代码：

<select id="first">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select id="second">
  <option value="11">选项11</option>
  <option value="12">选项12</option>
  <option value="13">选项13</option>
  <option value="21">选项21</option>
  <option value="22">选项22</option>
  <option value="23">选项23</option>
  <option value="31">选项31</option>
  <option value="32">选项32</option>
  <option value="33">选项33</option>
</select>

<select id="third">
  <option value="111">选项111</option>
  <option value="112">选项112</option>
  <option value="113">选项113</option>
  <option value="121">选项121</option>
  <option value="122">选项122</option>
  <option value="123">选项123</option>
  <option value="131">选项131</option>
  <option value="132">选项132</option>
  <option value="133">选项133</option>
  <option value="211">选项211</option>
  <option value="212">选项212</option>
  <option value="213">选项213</option>
  <option value="221">选项221</option>
  <option value="222">选项222</option>
  <option value="223">选项223</option>
  <option value="231">选项231</option>
  <option value="232">选项232</option>
  <option value="233">选项233</option>
  <option value="311">选项311</option>
  <option value="312">选项312</option>
  <option value="313">选项313</option>
  <option value="321">选项321</option>
  <option value="322">选项322</option>
  <option value="323">选项323</option>
  <option value="331">选项331</option>
  <option value="332">选项332</option>
  <option value="333">选项333</option>
</select>

<script>
  $(function() {
    // 第一级下拉框选择时
    $('#first').on('change', function() {
      var firstValue = $(this).val();
      // 更新第二级下拉框选项
      updateSecondOptions(firstValue);
      // 清空第三级下拉框选项
      clearThirdOptions();
    });
    
    // 第二级下拉框选择时
    $('#second').on('change', function() {
      var secondValue = $(this).val();
      // 更新第三级下拉框选项
      updateThirdOptions(secondValue);
    });
    
    function updateSecondOptions(firstValue) {
      // 根据第一级下拉框选项更新第二级下拉框选项
      var options = '';
      switch (firstValue) {
        case '1':
          options += '<option value="11">选项11</option>';
          options += '<option value="12">选项12</option>';
          options += '<option value="13">选项13</option>';
          break;
        case '2':
          options += '<option value="21">选项21</option>';
          options += '<option value="22">选项22</option>';
          options += '<option value="23">选项23</option>';
          break;
        case '3':
          options += '<option value="31">选项31</option>';
          options += '<option value="32">选项32</option>';
          options += '<option value="33">选项33</option>';
          break;
      }
      $('#second').html(options);
    }
    
    function updateThirdOptions(secondValue) {
      // 根据第二级下拉框选项更新第三级下拉框选项
      var options = '';
      switch (secondValue) {
        case '11':
          options += '<option value="111">选项111</option>';
          options += '<option value="112">选项112</option>';
          options += '<option value="113">选项113</option>';
          break;
        case '12':
          options += '<option value="121">选项121</option>';
          options += '<option value="122">选项122</option>';
          options += '<option value="123">选项123</option>';
          break;
        case '13':
          options += '<option value="131">选项131</option>';
          options += '<option value="132">选项132</option>';
          options += '<option value="133">选项133</option>';
          break;
        case '21':
          options += '<option value="211">选项211</option>';
          options += '<option value="212">选项212</option>';
          options += '<option value="213">选项213</option>';
          break;
        case '22':
          options += '<option value="221">选项221</option>';
          options += '<option value="222">选项222</option>';
          options += '<option value="223">选项223</option>';
          break;
        case '23':
          options += '<option value="231">选项231</option>';
          options += '<option value="232">选项232</option>';
          options += '<option value="233">选项233</option>';
          break;
        case '31':
          options += '<option value="311">选项311</option>';
          options += '<option value="312">选项312</option>';
          options += '<option value="313">选项313</option>';
          break;
        case '32':
          options += '<option value="321">选项321</option>';
          options += '<option value="322">选项322</option>';
          options += '<option value="323">选项323</option>';
          break;
        case '33':
          options += '<option value="331">选项331</option>';
          options += '<option value="332">选项332</option>';
          options += '<option value="333">选项333</option>';
          break;
      }
      $('#third').html(options);
    }
    
    function clearThirdOptions() {
      // 清空第三级下拉框选项
      $('#third').html('');
    }
  });
</script>