Question

I have a dropdown list and a javascript function which disables other fields when a certain value from the dropdown list is selected.

Javascript Code

function maritalStatusChange()
    {
        var dropdown = document.getElementById("maritalstatus").value;

        if(dropdown == 'Single')
        {
            document.getElementById("spousefld").disabled = true;
            document.getElementById("spouse_occupation").disabled = true;
            document.getElementById("address3").disabled = true;
            document.getElementById("children_no").disabled = true;
            document.getElementById("spousefld").value = "";
            document.getElementById("spouse_occupation").value = "";
            document.getElementById("address3").value = "";
            document.getElementById("children_no").value= "None";
                }
        if(dropdown == 'Married')
        {
            document.getElementById("spousefld").disabled = false;
            document.getElementById("spouse_occupation").disabled= false;
            document.getElementById("address3").disabled = false;
            document.getElementById("children_no").disabled = false;
            document.getElementById("maritalstatus").value= 'Married';
                }
        if(dropdown == 'Separated')
        {
            document.getElementById("spousefld").disabled = false;
            document.getElementById("spouse_occupation").disabled= false;
            document.getElementById("address3").disabled = false;
            document.getElementById("children_no").disabled = false;
        }
        if(dropdown == 'Widowed')
        {
            document.getElementById("spousefld").disabled = false;
            document.getElementById("spouse_occupation").disabled= false;
            document.getElementById("address3").disabled = false;
            document.getElementById("children_no").disabled = false;
        }
    }

Here is the HTML code of the dropdown list and where I call the javascript function.

<select name="maritalstatus" id="maritalstatus" onchange="maritalStatusChange();">
                                <option>---------------</option>
                                <option value='Single'>Single</option>
                                <option value='Married'>Married</option>
                                <option value='Separated'>Separated</option>
                                <option value='Widowed'>Widowed</option>
                                </select><font color="red">*</font>

Right now, the only thing that works is when I select the “Single” option however, it does not seem to get proper selected value for the rest of the options. Can anyone tell me what I did wrong?

Thanks!

Answer 1

Try This:

var dropdown = document.getElementById("maritalstatus").options[document.getElementById("maritalstatus").selectedIndex].value;