Hide drop down value based on selection of another drop down

Question

Please suggest if below works as i want to hide a drop down value based on other drop down value selection , but it is not working as expected.

var dropdown1 = $(":input[title='Engagement Type']");

if(dropdown.find("option[value='Tracking Number request']")==true)
{
  dropdown1.find("option[value='CR(Change Request)']").remove();
  }

Answer 1

You can write the below change event of the first drop-down and hide the option of the second drop-down based on the selected value of the first drop-down.

Drop-down 1's ID = dropdown1

Drop-down 2's ID = dropdown2

   $("#drop-down1").change(function(){
            var selectedValue = $(this).children("option:selected").val();
            if(selectedValue === "Tracking Number request")
            {
                $("#drop-down2 option[value='CR(Change Request)']").remove(); 
            }       
    });

Answer 2

you should just edit the condition in your if. Just use as below

if(dropdown.find("option[value='Tracking Number request']"))
{
  dropdown1.find("option[value='CR(Change Request)']").remove();
}

Answer 3

Try this:

<select title='Field A'>
  <option key="A">A</option>
  <option key="B">B</option>
  <option key="C">C</option>
</select>

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script> 
<script type="text/javascript">
         $(document).ready(function () {
            $("select[title='Field A']").change(function () {
           
                if ($("[title='Field A'] option:selected").text() == "A") {
                    $("[key='C']").hide()
                }
                
            });
        });

</script>