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

 function change() {
            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>
        <select name="country" onchange="change();">
            <option value="county1">county1</option>
            <option value="county2">county2</option>
            <option value="county3">county3</option>
        </select>
    </div>
    <br />
    <div>
        county1: <input type="text" name="county1" />
    </div>
    <div>
        county2: <input type="text" name="county2" />
    </div>

    <div>
        county3: <input type="text" name="county3" />
    </div>