How to select a particular <option> for a jquery event?

JavaScript
1

This is main.js

$(document).ready(function(){
$("#otherrelg").hide();
$(".otherrelg").hide();
$("#other").click(function(){   // on click should work for <option id="other"value="6">Others</option> only but its not working 
	
	$("#otherrelg").show();
	$(".otherrelg").show();
});

});

and this is index.html

<tr>
                <td><label for="famreligion">9. Family Religion:</label></td>
                <td><select id="famreligion" class="form-control input-sm">
                      <option>---Please Select---</option>
                      <option>Hindu</option>
                      <option>Muslim</option>
                      <option>Christian</option>
                      <option>Sikh</option>
                      <option id="other" value="6">Others</option>
                    </select>
                </td>
                <td><label class="otherrelg" for="otherrelg">Religion Name:</label></td>
                <td><input id="otherrelg" type="text" class="form-control input-sm"></td>
              </tr>
              <tr>
2

#famreligion is a <select> so yes it would work for all the options. Change the code below.

$("#famreligion").click(function()

Should be 

$("#other").click(function()

Edit-Holy crap why is that text so big.

3

I’ve done that already but its not working.

4

Need to escape the # sign with \# (when it is at the beginning of the line, otherwise, it is treated as a header)

1 Like
5

You need to attach an onchange handler to the select element.
When the select’s value changes, then you can check if it is “Others” or “6” and react accordingly.

$("#famreligion").on("change", function() {
    if ($(this).val() === "6") {
        $("#otherrelg").show();
        $(".otherrelg").show();
    } else {
        $("#otherrelg").hide();
        $(".otherrelg").hide();
    }
});
6

A slightly cleaner version:

$("#famreligion").on("change", function() {
  if ($(this).val() === "Others") {
    $("#otherrelg, .otherrelg").show();
  } else {
    $("#otherrelg, .otherrelg").hide();
  }
});

$("#famreligion").trigger("change");

Demo:

7

Thanks for this reply