Question

首先-我对JS有点绿色，所以请放轻松！我试图根据一个国家的选择显示/隐藏2个不同的div。基本上，如果用户选择英国，则显示英国地址div，如果选择任何其他国家，则显示国际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，但不显示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(); 
}

添加大括号将解决您的问题。

为什么我的函数未按预期显示和隐藏元素？

1 个答案: