Combo box selection show s a different link

[lurtnowski]

I have a form,

I have the select box (Links to) where 3 selections can be made

 <option value='1'>PDU</option> 
 <option value='2'>UPS</option>
 <option value='3'>Power Supply</option>

I am trying to have another combo box (with an if of pdu, ups, or power_supply) show up (display:none turns off)
so should I use

<select onchange="myFunction()">

then what from there? three if statements in the function?

[Paul_Wilkins]

Start off with the other combo box being turned on, so that it still works even when JavaScript is not available.

On page load use JavaScript to hide the combo box.

Then, have the change event of the select box either show or hide the combo box based on the currently selected index.

[lurtnowski]

ok, made some progress, when the page loads, you see

then when you make a selection, it fires off this function

function showComboBox() {
	document.getElementById("links_title").style.display = "none";	
	document.getElementById("new_links_title").style.display = "block";	
}

It seems to work as the text element goes away and is replaced by a combo box

Now based on which of the 3 options which can be choosen (1,2,3), how can I make the new combo box have their options?

<select id="new_links_title" name="links_title" class="form-control" style="display:none">

</select>

turns into

<select id="new_links_title" name="links_title" class="form-control" style="display:none">
<option>test 1</option>
<option>test 2</option>
</select>
or
<select id="new_links_title" name="links_title" class="form-control" style="display:none">
<option>test 3</option>
<option>test 4</option>
</select>
or
<select id="new_links_title" name="links_title" class="form-control" style="display:none">
<option>test 5</option>
<option>test 6</option>
</select>

with the options changing based on the 3 options at the first. select box

Thanks

[lurtnowski]

I was thinking, would something like this work

function showComboBox() {      

        var selObj = document.getElementById("links_title");
        var selValue = selObj.options[selObj.selectedIndex].value;
        var newSel= document.getElementById("new_links_title");

        selObj .style.display = "none";	
	newSel.style.display = "block";	

        if (selValue  === 1) {
        newSel.innerHTML = "<option>A</option>";
        } else if (selValue  === 2) {
        newSel.innerHTML = "<option>B</option>";
        } else if (selValue  === 3) {
        newSel.innerHTML = "<option>C</option>";
        } 
}

[Paul_Wilkins]

@lurtnowski

test 1 test 2

Setting the inline HTML style to none is one of the worst ways to handle things, and should not be used in todays code as there are several other better ways to deal with things.

My options from here are to either undo the damage to your code before making progress, or to just take useful parts from your code and start over from scratch. I’ll take the latter option here.

The visibility of an element doesn’t change which of them gets submitted, so it’s best for each form element to have different names. I’ve given the options different names too, to help us tell which one we’re looking at.

        <select id="pdu_links_title" name="pdu_links_title" class="form-control">
            <option>pdu test 1</option>
            <option>pdu test 2</option>
        </select>
        <select id="ups_links_title" name="ups_links_title" class="form-control">
            <option>ups test 1</option>
            <option>ups test 2</option>
        </select>
        <select id="power_supply_links_title" name="power_supply_links_title" class="form-control">
            <option>power supply test 1</option>
            <option>power supply test 2</option>
        </select>

When the HTML code displayed the form, I saw that those options all displayed to the right of the main select, so I’ve wrapped the additional selects in a paragraph container.

<select>
    ...
</select>
<p id="secondary_selects">
    <select ...>
        ...
    </select>
    <select ...>
        ...
    </select>
    <select ...>
        ...
    </select>
</p>

Those secondary selects re very useful when JavaScript isn’t working. They all get submitted and the server can use the primary select to decide which of the secondary ones to pay attention to.

In the web browser we can then hide each of the secondary selects as the page is loading.

const primary = document.querySelector("#primary_select");
const secondarys = document.querySelector("#secondary_selects");
const secondarySelects = secondarys.querySelectorAll("select");
secondarySelects.forEach(function (secondary) {
    secondary.classList.add("hide");
});

When the page loads, it’s helpful if the currently selected primary option determines which of the secondary selects to show too.

Here we hide all of the secondary selects, then use the primary value to decide which of them to show.

function showSecondaryBasedOnPrimary(primary, secondarySelects) {
    secondarySelects.forEach(function (secondary) {
        secondary.classList.add("hide");
    });
    secondarySelects.forEach(function (secondary) {
        const suffix = secondary.name.charAt(secondary.name.length - 1);
        if (suffix === primary.value) {
        	secondary.classList.remove("hide");    
        }
    });
}
showSecondaryBasedOnPrimary(primary, secondarySelects);

And, when the primary select is changed, we can update what is shown too.

primary.addEventListener("change", function (evt) {
    showSecondaryBasedOnPrimary(primary, secondarySelects);
});

Code that shows this all in action is over at https://jsfiddle.net/pmw57/b905xfo8/18/

[lurtnowski]

It works great, got 1 question though,
It works great on

when you select the room name a different set of racks show up.
I tried to duplicate the effect on another dropdown (depending on what width you choose a different set of options should appear as far as alignment goes.
I only knew how to put images im a select box using jquery which seemed to change the code pretty good.
Can i even use this function on the select the jquery produces?