How Can I Make Rows Show Or Hide Based On A Value Of A Selectbox?

The schema is like that, I use SelectBoxes and Text SelectBox - country SelectBox - *county1* Text-*countyText1* SelectBox - *county2* Text-*countyText2* SelectBox - *county3* T

Solution 1:

If I understand correctly you want show and hide some textbox based on your selectbox value.

You have to go through all options and set display=none for all correspond text (based on name) except selected option value. For selected option value you must find correspond textbox and set display=inline or block

functionchange() {
            var source = document.getElementsByName("country")[0];

            for (var i = 0; i < source.options.length; i++) {
                if (source.selectedOptions[0].value == source.options[i].value) {
                    document.getElementsByName(source.options[i].value)[0].style.display = "inline";
                    document.getElementsByName(source.options[i].value)[0].parentElement.style.display = "inline";
                    document.getElementsByName(source.options[i].value)[0].value = source.options[i].value;

                }
                else {
                    document.getElementsByName(source.options[i].value)[0].style.display = "none";
                    document.getElementsByName(source.options[i].value)[0].parentElement.style.display = "none";
                }
            }
        }

<div><selectname="country"onchange="change();"><optionvalue="county1">county1</option><optionvalue="county2">county2</option><optionvalue="county3">county3</option></select></div><br /><div>
        county1: <inputtype="text"name="county1" /></div><div>
        county2: <inputtype="text"name="county2" /></div><div>
        county3: <inputtype="text"name="county3" /></div>