如何防止带有display：none的表单字段被提交

Question

我有一个注册表格，要求用户从下拉菜单中选择一个国家。

我有一些脚本，该脚本根据用户选择的国家/地区显示特定的“地区/州”字段。

$("#Country").change(function() { 
    
		if ( $(this).val() == "GB") {
			$("#RegionsUS").hide();
			$("#RegionsOTHER").hide();
			$("#RegionsUK").show();
		}
		else if ( $(this).val() == "US") {
			$("#RegionsUS").show();
			$("#RegionsOTHER").hide();
			$("#RegionsUK").hide();
		}
		else {
			$("#RegionsOTHER").show();
			$("#RegionsUS").hide();
			$("#RegionsUK").hide();
		}
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>              

<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">

<select id="RegionsUS" name="Region" class="form-control" style="display:none;">
<option value="Alabama">Alabama</option>
</select>

<select id="RegionsUK" name="Region" class="form-control" style="display:none;">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>

</form>

问题是，提交表单时，尽管三个区域字段始终被隐藏，但所有三个区域字段均被提交。

如何防止隐藏字段与表单一起提交？

谢谢。 新泽西州

Answer 1

抱歉，尽管昨天几乎整天都在搜索并且没有看到以下内容，但我的问题显然与该问题非常相似： Preventing an HTML form field from being submitted

因此，我对功能和HTML进行了如下编辑：

$("#Country").change(function() { 
    
		if ( $(this).val() == 425) {
			$("#RegionsUS").hide();
			document.getElementById('RegionsUS').disabled = true;
			$("#RegionsOTHER").hide();
			document.getElementById('RegionsOTHER').disabled = true;
			$("#RegionsUK").show();
			document.getElementById('RegionsUK').disabled = false;
		}
		else if ( $(this).val() == 426) {
			$("#RegionsUS").show();
			document.getElementById('RegionsUS').disabled = false;
			$("#RegionsOTHER").hide();
			document.getElementById('RegionsOTHER').disabled = true;
			$("#RegionsUK").hide();
			document.getElementById('RegionsUK').disabled = true;
		}
		else {
			$("#RegionsOTHER").show();
			document.getElementById('RegionsOTHER').disabled = false;
			$("#RegionsUS").hide();
			document.getElementById('RegionsUS').disabled = true;
			$("#RegionsUK").hide();
			document.getElementById('RegionsUK').disabled = true;
		}
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>              

<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">

<select id="RegionsUS" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="Alabama">Alabama</option>
</select>

<select id="RegionsUK" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>

</form>