Amirali Amirali - 20 days ago 7
Ajax Question

how to fix triple drop down menu?

I have the following code and Numbers inside the values :

I want all of the codes below:

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


Change to :

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


Actually I want the values ​​to be empty and numbers inside the values placed the other ID in option like id="" or data-id="" or ....



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);
});

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




Answer

EDIT:

Editing my whole answer as the problem has been altered. As you only want to give the user the choice to select options based on another selects current value.

Firstly, I have put the terrSelect and locSelect to disabled as default. Thus the user must first select an orgSelect. When orgSelect changes, we will enable terrSelect. Then, we loop through all of terrSelect child elements, and disable those not matching the value of locSelect. The same procedure is then repeated for 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>