Почему моя функция не показывает и не скрывает элементы, как ожидалось?

Question

Во-первых - я немного зеленоват с JS, поэтому, пожалуйста, будьте спокойны!Я пытаюсь показать / скрыть 2 разных div в зависимости от выбора страны.В основном, если пользователь выбирает Великобританию, он показывает раздел адреса в Великобритании, а если он выбирает любую другую страну, появляется международный раздел.

В конечном счете, я хочу, чтобы за один раз отображался только 1 элемент, поэтому нужно, чтобы он переключалсявключается и выключается в зависимости от выбора.

Я использовал существующее решение, чтобы добраться до стадии, на которой я нахожусь:

<div>
  <label>Country:</label>
  <select name="country" id="country" class="fullselect" onclick="craateUserJsObject.ShowPrivileges();">
    <option value="all">All</option>
    <option value="United Kingdom UK">United Kingdom UK</option>
    <option value="Vietnam VN">Vietnam VN</option>
    <option value="Vanuatu VU">Vanuatu VU</option>
    <option value="Wallis And Futuna Islands WF">Wallis And Futuna Islands WF</option>
    <option value="Western Samoa WS">Western Samoa WS</option>
  </select>
</div>
<div class="lookupbox" style=" display: block;">UK Lookup Box</div>
<div class="manualbox" style=" display: none;">International Input Box</div>

var Privileges = jQuery('#country');
var select = this.value;

Privileges.change(function() {
  if ($(this).val() == 'United Kingdom UK') {
    $('.lookupbox').show();
    $('.manualbox').hide()
  } else 
    $('.manualbox').show();

  $('.lookupbox').hide();
});

Это работает в том смысле, что скрывает международный разделкогда выбрано UK, но оно не показывает Div Великобритании *

JS FIDDLE

Я предполагаю, что есть что-то невероятно простое, что я упускаю, поэтому любойПомощь будет принята с благодарностью!

Answer 1

Ваша проблема существует с вашим else:

if ($(this).val() == 'United Kingdom UK') {
    $('.lookupbox').show();
    $('.manualbox').hide()
}
else $('.manualbox').show();
    $('.lookupbox').hide(); 

Поскольку вы не включаете оба оператора, if / else влияет только на первый оператор, а второй выполняется каждый раз.

if ($(this).val() == 'United Kingdom UK') {
    $('.lookupbox').show();
    $('.manualbox').hide()
} else {
    $('.manualbox').show();
    $('.lookupbox').hide(); 
}

Добавление фигурных скобок решит вашу проблему.