如何從後顯示隱藏OPTGROUP數據選擇

Question

我想隱藏其他optgroup（display: none）時main1由X產品選擇 - MAIN2只顯示X產品數量和隱藏其它Y和Z.

<select id="MAIN1" name="MAIN1" onchange="calculate()"> 
    <option selected>SELECT PRODUCT TYPE</option> 
    <option id="1" >PRODUCT X</option> 
    <option id="2" >PRODUCT Y</option> 
    <option id="3" >PRODUCT Z</option> 
</select> 
<select id="MAIN2" name="MAIN2" onchange="calculate()"> 
    <option selected>SELECT WEIGHT & QUANTITY</option> 
    <optgroup id="11" label="PRODUCT X"> 
    <optgroup id="111" label="1KG"> 
     <option value="50">1 POUCH</option> 
     <option value="100">2 POUCH</option> 
     <option value="150">3 POUCH</option> 
     <option value="200">4 POUCH</option> 
    </optgroup> 
    </optgroup> 
    <optgroup id="22" label="PRODUCT Y"> 
    <optgroup id="222" label="1KG"> 
     <option value="150">1 POUCH</option> 
     <option value="300">2 POUCH</option> 
     <option value="450">3 POUCH</option> 
     <option value="600">4 POUCH</option> 
    </optgroup> 
    </optgroup> 
    <optgroup id="33" label="PRODUCT Z"> 
    <optgroup id="333" label="1KG"> 
     <option value="300">1 POUCH</option> 
     <option value="600">2 POUCH</option> 
     <option value="950">3 POUCH</option> 
     <option value="1000">4 POUCH</option> 
    </optgroup> 
    </optgroup></optgroup> 
</select> 

Answer 1

嘗試這

jQuery和純JS版：

很抱歉，但你不能把一個OPTGROUP標籤到其他OPTGROUP標籤。

// Pure JS version 
 

 
window.onload = function(){ 
 
var main1 = document.querySelector('#MAIN1'); 
 
    
 
    var onchanged = function(){ 
 
    var this_ = this; 
 
    var value = this_.value; 
 
    var main2 = document.querySelector("#MAIN2"); 
 
    var alloption = main2.querySelectorAll('optgroup[label*="PRODUCT"]') 
 
    var getByLabel = main2.querySelector('[label="'+value+'"]'); 
 
    
 
    alloption.forEach(function(element){ 
 
    element.style.display = "none"; 
 
    }); 
 

 
    getByLabel.style.display = "block"; 
 
    
 
    }; 
 
    
 
main1.onchange = onchanged; 
 

 
}; 
 

 
// Jquery Version. 
 

 
/* 
 
$(document).ready(function(){ 
 
    $('#MAIN1').on('change',function(){ 
 
    var this_ = $(this); 
 
    var value = this_.val(); 
 
    var main2 = $("#MAIN2"); 
 
    var alloption = main2.find('optgroup[label*="PRODUCT"]') 
 
    var getByLabel = main2.find('[label="'+value+'"]'); 
 
    
 
    alloption.hide() 
 
    getByLabel.show() 
 
    
 
    }); 
 
}); 
 

 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="MAIN1" name="MAIN1" > 
 
    <option selected>SELECT PRODUCT TYPE</option> 
 
    <option id="1" >PRODUCT X</option> 
 
    <option id="2" >PRODUCT Y</option> 
 
    <option id="3" >PRODUCT Z</option> 
 
</select> 
 
<select id="MAIN2" name="MAIN2" > 
 
    <option selected>SELECT WEIGHT & QUANTITY</option> 
 
    <optgroup id="11" label="PRODUCT X"> 
 
     <option value="50">1 POUCH</option> 
 
     <option value="100">2 POUCH</option> 
 
     <option value="150">3 POUCH</option> 
 
     <option value="200">4 POUCH</option> 
 
    </optgroup> 
 
    <optgroup id="22" label="PRODUCT Y"> 
 
     <option value="150">1 POUCH</option> 
 
     <option value="300">2 POUCH</option> 
 
     <option value="450">3 POUCH</option> 
 
     <option value="600">4 POUCH</option> 
 
    </optgroup> 
 
    <optgroup id="33" label="PRODUCT Z"> 
 
     <option value="300">1 POUCH</option> 
 
     <option value="600">2 POUCH</option> 
 
     <option value="950">3 POUCH</option> 
 
     <option value="1000">4 POUCH</option> 
 
    </optgroup> 
 
</select>