尝试基于select(下拉)元素显示隐藏的div

Question

我有一个国家/地区的选择字段，我想在隐藏的div中显示一个复选框。这是我在网站上的代码。有什么理由不起作用吗？

<select id="country" name="field-010" required="" data-name="field-010" class="w-select" onchange="showDiv()">
<option value="United States of America">United States of America</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Belgium">Belgium</option>
</select>
<label id="gdpr" class="w-checkbox checkbox-field" style="display:none;">
<div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox"></div>
<input type="checkbox" id="field-011" name="field-011" data-name="field-011" style="opacity:0;position:absolute;z-index:-1" data-di-id="#field-011"><span for="field-011" id="field-011" class="checkbox-label w-form-label">TEXT HERE</span>
</label>
<script type="text/javascript">
function showDiv(){
if(country.value==United Kingdom){
document.getElementById('gdpr').style.display = "block";
} else{
document.getElementById('gdpr').style.display = "none";
}
} 
</script>

Answer 1

校正：

if(country.value=="United Kingdom"(

否：

if(country.value==英国(

使用带有linter的VSCode，它有助于

https://code.visualstudio.com/

Answer 2

将<label id="gdpr"....>控件更改为<div>，或在<label>周围添加<div>并切换其显示样式。不能在<label>元素中包含<div>。

Answer 3

只有一个更正：英国应该在报价中

function showDiv() {
if (country.value === "United Kingdom") {
document.getElementById('gdpr').style.display = "block";
} else {
document.getElementById('gdpr').style.display = "none";
}
}

<select id="country" name="field-010" required="" data-name="field-010" class="w-select" onchange="showDiv()">
<option value="United States of America">United States of America</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Belgium">Belgium</option>
</select>
<label id="gdpr" class="w-checkbox checkbox-field" style="display:none;">
<div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox"></div>
<input type="checkbox" id="field-011" name="field-011" data-name="field-011" style="opacity:0;position:absolute;z-index:-1" data-di-id="#field-011"><span for="field-011" id="field-011" class="checkbox-label w-form-label">TEXT HERE</span>
</label>