javascript - 选择后如何隐藏optgroup数据不显示

Question

当产品 X 选择 main1 时，我想隐藏其他 optgroup (display: none) - 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>