How can I use jquery fadein in html select options ?

Question

<select>
<option id="option1" value="a"> a </option>
<option id="option2" value="b"> b </option>
</select>

<p id="p1"> Paragraph 1 </p>
<p id="p2"> Paragrahp 2 </p>

what I want to happen is when I select option 1, the p1 will show and when I select option 2, the p2 will show. I already use the display:none on the paragraph.

this is my jquery

$("option1").click(function(){
$("p1").fadeIn();
});
the same for option 2.

but it's not working

Help me plss.

Answer 1

You use change() function

$("select").change(function() {
if($(this).val() == "a") {
$("#p1").fadeIn();
}
});

Answer 2

thank you so much it works 😀