我在 Liferay 的 view.jsp 中应用了逻辑,以根据从国家/地区下拉列表中选择的国家/地区在州/地区下拉列表中显示州/地区列表。我使用 html 和 java 脚本来实现从下拉列表中显示所选国家/地区的状态下拉列表的目标。目前,当我第一次加载表单时,带有下拉列表的国家和州标签都在显示。状态下拉列表起初是空的。然后,当我选择国家/地区时,例如:美国,州下拉列表更改为与美国相关的州列表,该列表按预期工作。但是,我不想在加载表单时首先显示州下拉列表和州标签,因为它将是空的,并且只有在国家/地区下拉列表中才会选择“选择国家/地区”选项。这对我不起作用。知道我应该怎么做才能制作州标签并在表单加载时首先显示下拉列表,并且仅当从国家下拉列表中选择国家时才显示州下拉列表吗?
下面是我的 html 和 java 脚本代码:
<select name="<portlet:namespace/>Country" id="countryId" onchange="javascript:countryChange()">
<option value="0">Select Country</option>
<option value='US'>United States</option>
<option value='CA'>Canada</option>
</select>
<label id="stateLabel">State:</label>
<select name="<portlet:namespace/>State" id="stateId">
</select>
<!--Country and State Change Javascript-->
<script>
function CountryChange() {
var countryState = [
[
'US', [
['', 'State/Province'],
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
], ],
[
'CA', [
['', 'State/Province'],
['AB', 'Alberta'],
['BC', 'British Columbia'],
['MB', 'Manitoba'],
['NB', 'New Brunswick'],
]]
];
var countryElement = document.getElementById('countryId');
var stateElement = document.getElementById('stateId');
var stateLabelElement = document.getElementById('stateLabel');
if (countryElement && stateElement) {
var listOfState = [
['XX', 'None']
];
var currentCountry = countryElement.options[countryElement.selectedIndex].value;
for (var i = 0; i < countryState.length; i++) {
if (currentCountry == countryState[i][0]) {
listOfState = countryState[i][1];
}
}
if (listOfstate.length < 2)
{
stateElement.style.display = 'none';
stateLabelElement.style.display = 'none';
}
else
{
stateElement.style.display = 'inline';
stateLabelElement.style.display = 'inline';
}
var selectedState;
for (var i = 0; i < stateElement.length; i++) {
if (stateElement.options[i].selected === true) {
selectedState = stateElement.options[i].value;
}
}
stateElement.options.length = 0;
for (var i = 0; i < listOfState.length; i++) {
stateElement.options[i] = new Option(listOfState[i][1], listOfState[i][0]);
if (listOfState[i][0] == selectedState) {
stateElement.options[i].selected = true;
}
}
}
}
</script>
最佳答案
你有很多拼写错误。检查一下:https://jsfiddle.net/jj8we58t/1/
我还将 stateLabel
和 stateId
元素的初始 display
设置为 none
。
<label id="stateLabel" style="display: none">State:</label>
<select name="<portlet:namespace/>State" style="display: none" id="stateId">
关于javascript - 使用 html 和 Javascript 选择国家和州,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35135722/