Show/hide text field depending on select option I'm new with JavaScript and need your advice. The idea is to show/hide text field depending on select option. I have a working code, but I believe it could be more readable and better. What have I missed?

   &lt;script type="text/javascript"&gt;
&lt;!--
    function showHide(){
        var selectedValue =document.getElementById("choice_criteria_id").value;
        var src_addr = document.getElementById("id_src_addr");
        var dst_addr = document.getElementById("id_dst_addr");
        var port = document.getElementById("id_port");
        var port_range = document.getElementById("id_port_range");

        if (selectedValue == "source_ip"){
            src_addr.style.display = "inline";
            dst_addr.style.display = "none";
            port.style.display = "none";
            port_range.style.display = "none";


        } else if (selectedValue == "dest_ip"){
            dst_addr.style.display = "inline";
            src_addr.style.display = "none";
            port.style.display = "none";
            port_range.style.display = "none";


        } else if (selectedValue == "port"){
            port.style.display = "inline";
            src_addr.style.display = "none";
            dst_addr.style.display = "none";
            port_range.style.display = "none";

        } else if (selectedValue == "port_range"){
            port_range.style.display = "inline";
            src_addr.style.display = "none";
            dst_addr.style.display = "none";
            port.style.display = "none";
        }
}

--&gt;
&lt;/script&gt;
You can use Conditional (ternary) Operator.

Syntax :

condition ? expr1 : expr2 


Reformated code :

function showHide(){
    var selectedValue =document.getElementById("choice_criteria_id").value;
    document.getElementById("id_src_addr").style.display = (selectedValue == "source_ip") ? "inline" : "none";
    document.getElementById("id_dst_addr").style.display = (selectedValue == "dest_ip") ? "inline" : "none";
    document.getElementById("id_port").style.display = (selectedValue == "port") ? "inline" : "none";
    document.getElementById("id_port_range").style.display = (selectedValue == "port_range") ? "inline" : "none";
}


Example in CodePen