Java 在下拉列表中获取所选值的相关信息，而无需进行额外的AJAX调用

假设我在JSP上使用languageList呈现了以下下拉项。当我在下拉列表中选择一个项目时，会选择相应的语言

<html:select property="Language" >
<html:optionsCollection name="InputForm" property="languageList"label="label" value="value" />
</html:select>

假设我有一张国家地图，上面标明了该语言的使用地点。所以，国家不是独一无二的，但语言是独一无二的。选择要在UI中显示国家/地区的语言时。我知道它可以通过使用AJAX调用和语言作为输入参数来实现。不管怎样，我可以在没有AJAX调用的情况下实现上述行为

我考虑在值中包含国家，但我的目标不仅仅是在UI上显示国家，而且我还使用语言作为进一步处理的输入调用服务器。所以，我想要语言中的值。

---

我考虑的另一个解决方案是将国家和语言结合起来作为价值（英国英语）。然后我可以进行字符串操作，在UI上显示UK，并用英语进行服务器调用。但这个解决方案对我来说似乎有点老套，我想知道是否有更干净的方法。

您可以在UI中用id或类html属性标记您的国家。然后，使用填充有逗号分隔的相应国家/地区标签列表的值呈现下拉列表。例如：

<select>
  <option value="UK,USA">English</option>
  <option value="France,Canada">French</option>
  ...
</select>

英语
法语
...

---

现在，若用户选择英语，您将从“option”标记中获取“value”属性，用逗号将其拆分，然后按id/class属性选择适当的html元素并显示它们。这是概念，但具体取决于具体的实现。

我建议在jsp中的某个地方将地图呈现为javascript（或json）对象，并为下拉输入编写changelistener

<select id="language" onchange="setCountry()">...</select>
<select id="country">...</select>

<script type='text/javascript'>
    var languageMapping =  {
        'German' : ['Germany', 'Swiss', 'Austria' ],
        'English' : ['France', 'Canada'],
        ...
    }

    var setCountry = function() {
        //clean selection
        var countrySelection = document.getElementById("country");
        while (countrySelection.firstChild) {
            countrySelection.removeChild(countrySelection.firstChild);
        }


        var val = document.getElementById("language").value;
        var countryOptions = languageMapping[val];
        //fill selection
        for(var i = 0; i < countryOptions.length; i++) {
            var optionElement = document.createElement("option");
            optionElement.setAttribute("value", countryOptions[i]);
            var textNode = document.createTextNode(countryOptions[i]);
            optionElement.appendChild(textNode);
            countrySelection.appendChild(para);
        }
    }

</script>

json对象的创建可以手动完成，也可以借助jackson之类的框架完成。这里是客户机实现的原始概念

<select id="language" onchange="setCountry()">...</select>
<select id="country">...</select>

<script type='text/javascript'>
    var languageMapping =  {
        'German' : ['Germany', 'Swiss', 'Austria' ],
        'English' : ['France', 'Canada'],
        ...
    }

    var setCountry = function() {
        //clean selection
        var countrySelection = document.getElementById("country");
        while (countrySelection.firstChild) {
            countrySelection.removeChild(countrySelection.firstChild);
        }


        var val = document.getElementById("language").value;
        var countryOptions = languageMapping[val];
        //fill selection
        for(var i = 0; i < countryOptions.length; i++) {
            var optionElement = document.createElement("option");
            optionElement.setAttribute("value", countryOptions[i]);
            var textNode = document.createTextNode(countryOptions[i]);
            optionElement.appendChild(textNode);
            countrySelection.appendChild(para);
        }
    }

</script>

。。。
...
var languageMapping={
“德语”：[“德国”、“瑞士”、“奥地利”]，
“英语”：[“法国”、“加拿大”]，
...
}
var setCountry=函数（）{
//干净的选择
var countrySelection=document.getElementById（“国家”）；
while（countrySelection.firstChild）{
countrySelection.removeChild（countrySelection.firstChild）；
}
var val=document.getElementById（“语言”）.value；
var countryOptions=languageMapping[val]；
//填充选择
对于（变量i=0；i

我可能会使用dropwdown值和CSS设置一个类，以将地图国家与当前类匹配。请您再解释一下。你什么意思？一个小例子是非常感谢。我考虑过这一点，但我的目标是不只是显示在用户界面上的英国，美国。除了在UI上显示国家以外，我还使用语言调用服务器，作为进一步处理的输入。因此，我希望值中包含语言。@buhthla感谢您的回答，我已经更新了我的问题。如果您使用语言作为输入对服务器进行ajax调用，那么让服务器方法返回国家列表以及您需要的其他一些结果会有什么问题？语言将在页面稍后的调用中使用，在那次通话之前需要显示国家。