根据使用 HTML 和 Javascript 的 2 个下拉列表选择的条件显示 DIV

Question

My question is to populate DIV based on conditions of 2 dropdowns selection using HTML & Javascript:

I have 2 dropdown

1st dropdown contains manager id 2nd dropdown contains Yes/No

After selecting 2 dropdowns (Either "A"/"B"/"C" from first dropdown & Yes from second dropdown) then div which contains one text box and submit button should be displayed else it should be hidden.

Below is the code I tried and it didn't give the expected result.

 $(function() { $("#manager").change(function() { if ($(this).val() == "A" || ($(this).val() == "B") || ($(this).val() == "C") ) && $("#area").val() == "Y") { $("#countryname").show(); $("#sub").show(); } else { $("#countryname").hide(); $("#sub").hide(); } }); });

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <span>Select Manager</span> <select id="manager"> <option disabled selected value> -- select an option -- </option> <option value="A">ABC</option> <option value="B">BCD</option> <option value="C">CDE</option> <option value="D">DEF</option> </select> <hr /> <span>Is selected area covered?</span> <select id="area"> <option value="N">No</option> <option value="Y">Yes</option> </select> <hr /> <div id="country" style="display: none"> Label: <input type="text" id="countryname" /> <input type="submit" id="sub"> </div>

Answer 1

I think here's what you're looking for,

JS

$(()=>{
$("#area").change((e)=>{
    if(($("#manager").val() == "A" || $("#manager").val() == "B" || $("#manager").val() == "C" || $("#manager").val() == "D") && $("#area").val() == "Y"){
        $("#country").show();
    }
    else{
        alert("You choose no!!");
        e.preventDefault();
    }
})
})