如何修复三重下拉菜单?

时间:2014-10-01 08:02:50

标签: javascript jquery html css ajax

我在值中包含以下代码和数字:

我想要下面的所有代码:

<option value="1" class="sub_1">

更改为:

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

实际上我希望值为空,值内的数字将另一个ID放在选项中,如id =&#34;&#34;或data-id =&#34;&#34;或.... ....

&#13;
&#13;
    http://code.jquery.com/jquery-1.11.1.min.js

		function cascadeSelect(parent, child) {
		  var childOptions = child.find('option:not(.static)');
		  child.data('options', childOptions);
		  parent.change(function() {
		    childOptions.remove();
		    child
		      .append(child.data('options').filter('.sub_' + this.value))
		      .change();
		  })

		  childOptions.not('.static, .sub_' + parent.val()).remove();

		}

		$(function() {
		  cascadeForm = $('.cascadeTest');
		  orgSelect = cascadeForm.find('.orgSelect');
		  terrSelect = cascadeForm.find('.terrSelect');
		  locSelect = cascadeForm.find('.locSelect');

		  cascadeSelect(orgSelect, terrSelect);
		  cascadeSelect(terrSelect, locSelect);
		});
&#13;
<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">
          <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">
          <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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

修改

在问题发生变化时编辑我的整个答案。 因为您只想让用户选择基于另一个选择当前值的选项。

首先,我已将terrSelectlocSelect设为disabled作为默认值。因此,用户必须首先选择orgSelectorgSelect更改后,我们会启用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>

答案 1 :(得分:1)

这是你朋友说我无法用其他内容填充值的事情

见我的朋友们 我想要所有的代码如下:

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

更改为:

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

这些值将填充其他内容,例如hello和值内的数字填写其他id并且脚本没有问题