How can i remove specific items from a selection dropdown when an option is selected in js?

Question

I want to have one selection box display the correct sizes when a certain type is selected in another selection box, for example, when someone selects satin from the type box the size box should only display 24x36, 20x30, 16x24 & 12x18. here is the html code & js for the satin section, this code does what id like to achieve 100% on pc but it doesnt work on mobile im assuming because its using css to hide not actually removing the options

 var typeElement1 = document.getElementById('print-type1') var checkTypeText1 = typeElement1.options[typeElement1.selectedIndex].text typeElement1.addEventListener("change", (e) => { var typeText1 = typeElement1.options[typeElement1.selectedIndex].text if(typeText1 == 'SATIN') { var hidden24x361 = document.getElementById('24x36-button1') hidden24x361.style.display = "block" var hidden20x301 = document.getElementById('20x30-button1') hidden20x301.style.display = "block" var hidden17x2551 = document.getElementById('17x25.5-button1') hidden17x2551.style.display = "none" var hidden16x241 = document.getElementById('16x24-button1') hidden16x241.style.display = "block" var hidden13x191 = document.getElementById('13x19-button1') hidden13x191.style.display = "none" var hidden12x181 = document.getElementById('12x18-button1') hidden12x181.style.display = "block" var hidden10x151 = document.getElementById('10x15-button1') hidden10x151.style.display = "none" } })

 <select id="print-type1"> <option id="print-type-button1" value="">SELECT PRINT TYPE</option> <option id="satin-button1" value="">SATIN</option> <option id="lustre-button1" value="">LUSTRE</option> <option id="canvas-button1" value="">CANVAS</option> <option id="aluminum-button1" value="">ALUMINUM PHOTO PANEL</option> </select> <span class="custom-arrow"></span> <select id="size-type1"> <option id="size-button1" value="">SELECT SIZE</option> <option id="24x36-button1" value="">24x36</option> <option id="20x30-button1" value="">20x30</option> <option id="17x25.5-button1" value="">17x25.5</option> <option id="16x24-button1" value="">16x24</option> <option id="13x19-button1" value="">13x19</option> <option id="12x18-button1" value="">12x18</option> <option id="10x15-button1" value="">10x15</option> </select>

Answer 1

How about something like this?

 const menu2 = document.getElementById("menu2"); const menu2Options = [...menu2.children]; document.querySelector("#menu1").addEventListener("change", (e) => { menu2.innerHTML = menu2Options.filter((o) => e.target.value.includes(o.value)).map((o) => o.outerHTML).join(""); });

 <select name="menu1" id="menu1"> <option value="24x36,20x30,16x24,12x18">Satin</option> <option value="20x30,10x15">Lustre</option> <option value="13x19,12x18,10x15">Canvas</option> <option value="17x25.5,16x24">Aluminum Photo Panel</option> </select> <select name="menu2" id="menu2"> <option value="24x36">24 x 36</option> <option value="20x30">20 x 30</option> <option value="17x25.5">17 x 25.5</option> <option value="16x24">16 x 24</option> <option value="13x19">13 x 19</option> <option value="12x18">12 x 18</option> <option value="10x15">10 x 15</option> </select>