如何解決三重下拉菜單？

我希望所有下面的代碼：

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

更改爲：

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

其實我想要的值是空的，數值內的數值放在另一個ID中，如id =「」或data-id =「」或....

http://code.jquery.com/jquery-1.11.1.min.js 
 

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

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

 
\t \t } 
 

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

 
\t \t cascadeSelect(orgSelect, terrSelect); 
 
\t \t cascadeSelect(terrSelect, locSelect); 
 
\t \t });

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

來源

2014-10-01 Amirali

編輯：

編輯我的全部答案的問題已經改變。由於您只想讓用戶選擇基於另一選擇當前值的選項。

首先，我已將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>

來源

2014-10-01 08:07:58

'$（this）.attr（'value'，''）;'should be'$（this ）.val（''）;' – melancia 2014-10-01 08:10:17

'attr（'id'，$（this）.attr（'value'））'應該是'attr（'id'，$（this）.val（））' – melancia 2014-10-01 08:11:05

對不起，但我是jQuery中的初學者可以爲你在jsfiddle中修復它嗎？非常感謝你 – Amirali 2014-10-01 08:16:55

這件事，你的朋友說，我不能與其他內容

填補值見我的朋友我希望所有的代碼象下面這樣：

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

更改爲：

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

這些值應填入其他內容，如hello，值中的數字填入其他id，並且沒有腳本問題

來源

2014-10-01 11:20:33 Amirali

這不是讓某人爲你寫完整個代碼的地方。我上面的答案應該給你一些關於如何解決它的想法。不過，看看這個小提琴：http://jsfiddle.net/dsp7qeev/4/它表明你可以設置任何值你喜歡的選項。 – 2014-10-01 12:30:52

非常感謝您的幫助，對不起，但我是jQuery的初學者，另一個問題：在您的腳本中，我如何禁用選項是不顯示的？ – Amirali 2014-10-01 15:50:16

它不可能在HTML中將任何「隱藏」狀態設置爲選項元素。因此，您必須將sub1，sub2，sub3等元素存儲在其自己的字符串中。然後刪除改變下拉的內容，並插入包含將被啓用的元素的字符串 – 2014-10-02 06:04:09

如何解決三重下拉菜單？

回答

相關問題