Показать / скрыть элемент в соответствии с выбранным параметром

Question

Я хочу скрыть речевой ответ элемент , если пользователь выбирает язык Тамильский , но если пользователь выбирает Английский , элемент речевого ответа должен быть скрыт.

Это не работает, я не знаю почему. Пожалуйста, дайте мне совет, что не так с моим кодом.

Вот мой код:

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>

В очереди

var msg = new SpeechSynthesisUtterance(ans);

будет использован внутренний ответ, и этот ответ перейдет к функции speech(), отвечающей на вывод в виде голоса.

Основная проблема в том, что я хочу скрыть значение тега опции тамильского языка внутри функции speech(say).

Answer 1

На основании вашего описания (если я правильно понял) , вот образец, который вы можете настроить в соответствии со своими потребностями.

Измените опцию выбора тега, и вы увидите, что образец скрывает / показывает элемент примера в соответствии с выбранной в данный момент опцией.

---

Краткое описание:

• Когда пользователь запускает ваш сайт / веб-приложение, мы проверяем выбранный в данный момент параметр, если он Английский , мы в порядке, если это не так, мы скрываем элемент «речевой ответ» (каким бы ни был элемент вашей окончательной реализации)

• Прослушиватель событий также будет прикреплен к тегу select для обнаружения, когда пользователь изменяет текущую опцию. Если это английский , опять же, мы показываем «речевой ответ», если нет, мы собираемся скрыть его .

// 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>

---

Примечание

Надеюсь, вы хотели что-то вроде этого, хотя бы отправную точку для использования , если я ошибаюсь, пожалуйста, сообщите мне, и мы найдем лучшее решение.