Show/hide element according to the selected option

Question

I want to hide the speech response element , if the user selects the Tamil language from the drop down, but if the user selects English , the speech response element should be hidden.

It doesn't work, I don't know why. Please, give me a suggestion on what's wrong with my code.

Here is my code:

 function Speech(say) { if ('speechSynthesis' in window && talking) { $('#clitamilhide').hide(); var utterance = new SpeechSynthesisUtterance(say); speechSynthesis.speak(utterance); } } var msg = new SpeechSynthesisUtterance(ans); window.speechSynthesis.speak(msg); 

 <select name="language_" id="langu" class="selectpicker form-control form-control-sm" style="width: 300px; margin-top: 125px;"> <option value="English"> English </option> <option value="Tamil"> Tamil </option> </select> 

In line

var msg = new SpeechSynthesisUtterance(ans);

the backend response will be used and this response goes to the speech() function responding an output as voice.

The main problem is I want to hide the Tamil option tag value inside the function speech(say) .

Answer 1

Based on your description (if I got it right) , here's a sample you can customize according to your needs.

Change the select tag's option and you'll see, that the sample hides/shows the example element according to the currently selected option.

---

Quick rundown:

• When the user runs your site/web app, we check the currently selected option, if it's English , we are okay, if it's not, we hide the "speech response" element (whatever element will be your final implementation)

• An event listener will be also attached to the select tag to detect, when the user changes the current option. If it's English , again, we show the "speech response", if it's not, we're gonna hide it .

 // hides the speech response function showSpeechResponse() { $('.response').show(); } // showes the speech response function hideSpeechResponse() { $('.response').hide(); } // checks what's the currently selected option function checkSelectedOption() { var element = $('.selectpicker'); switch ($(element).val()) { case 'English': showSpeechResponse(); break; case 'Tamil': hideSpeechResponse(); break; } } // check the initially selected option checkSelectedOption(); // when the user selects another option, check the selected option $('.selectpicker').on('change', checkSelectedOption); /* your own code here ... function speech(say) { if ('speechSynthesis' in window && talking) { $('#clitamilhide').hide(); var utterance = new SpeechSynthesisUtterance(say); speechSynthesis.speak(utterance); } } var ans = 'The answer'; var msg = new SpeechSynthesisUtterance(ans); window.speechSynthesis.speak(msg); */ 

 .selectpicker { /*margin-top: 125px;*/ width: 300px; } .response { margin-top: 15px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="language_" id="langu" class="selectpicker form-control form-control-sm"> <option value="English">English</option> <option value="Tamil" >Tamil</option> </select> <div class="response">Speech Response</div> 

---

Note

I hope you wanted something like this, at least a starting point to use , if I'm mistaken, please, tell me and we're gonna figure out a better solution.