我将实现一个搜索表单，如 here .如您所见，第一个下拉框用于选择国家/地区。选择一个国家后，其城市列表将填充到第二个下拉列表中。请注意，第二个下拉列表首先被禁用，当它被数据填充时将被启用。
为了实现这一点，onChange 函数用于将第一个下拉列表的选定值发送到服务器并检索结果，但我不知道如何填充第二个下拉列表。
<s:form action="/Cars/find" method="GET">
<s:select id="country"
name="country"
list="@com.example.listOfCountries"
onChange="getCities(this.value)"
/>
<s:select id="city"
name="city"
headerKey="-1" headerValue="Select City"
disabled = "true"
list="{'empty'}";
/>
<s:submit value="Search"></s:submit>
</s:form>
JavaScript 函数
function getCities(val) {
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("carCity").disabled = "false";
document.getElementById("carCity").list = xmlhttp.responseText;
}
}
xmlhttp.open("get", "../Search/findCities?country=" + val, false);
xmlhttp.send();
}
Java
我的 Java 函数将城市列表添加到以下字段
private List<String> cities = new ArrayList();
并将它们显示到结果页面中使用
${cities}
xmlhttp.responseText 的输出
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
[{, 'Aberdeen', 'Aberystwyth', 'Aldershot', 'Amesbury', 'Anglesey', 'Ashford', 'Aylesbury', 'Ayr', 'Banbury', 'Barnstaple', 'Barrow In Furness', 'Basildon', 'Basingstoke', 'Bath', 'Bedford', 'Belfast', 'Birkenhead', 'Birmingham', 'Blackpool', 'Bolton', 'Bournemouth', 'Bracknell', 'Bradford', 'Brighton', 'Bristol', 'Bromley', 'Burnley', 'Burton Upon Trent', 'Bury St. Edmunds', 'Caernarfon', 'Cambridge', 'Cardiff', 'Carlisle', 'Carmarthen', 'Chatham', 'Chelmsford', 'Cheltenham', 'Chester', 'Colchester', 'Colwyn Bay', 'Coventry', 'Crawley', 'Croydon', 'Darlington', 'Dartford', 'Derby', 'Derry', 'Doncaster', 'Dover', 'Dudley', 'Dumbarton', 'Dumfries', 'Dundee', 'Durham Tees Valley', 'Eastbourne', 'East Kilbride', 'East Midlands', 'Edinburgh', 'Elgin', 'Epsom', 'Exeter', 'Falkirk', 'Falmouth', 'Fareham', 'Farnborough', 'Feltham', 'Fishguard', 'Fraserburgh', 'Glasgow', 'Glasgow Prestwick', 'Gloucester', 'Godalming', 'Great Yarmouth', 'Grimsby', 'Guernsey', 'Guildford', 'Gwynedd', 'Hamilton', 'Hampton', 'Harlington / Hayes', 'Harlow', 'Harrogate', 'Harrow', 'Hastings', 'Helston', 'Hemel Hempstead', 'Hereford', 'High Wycombe', 'Hoddesdon', 'Holyhead', 'Huddersfield', 'Hull', 'Humberside', 'Ilchester', 'Inverness', 'Ipswich', 'Isle of Man', 'Jersey', 'Kent', 'Kilmarnock', 'Kings Lynn', 'Kirkcaldy', 'Lancaster', 'Lancing', 'Leeds', 'Leicester', 'Lincoln', 'Liverpool', 'Livingston', 'Llandudno', 'London', 'London City Airport', 'London Gatwick Airport', 'London Heathrow Airport', 'London Luton Airport', 'London Stansted Airport', 'Lowestoft', 'Luton', 'Macclesfield', 'Maidstone', 'Manchester', 'Mansfield', 'Middlesbrough', 'Milton Keynes', 'Motherwell', 'Newbury', 'Newcastle Upon Tyne', 'Newport', 'Newquay', 'Northampton', 'Northwich', 'Norwich', 'Nottingham', 'Oldbury', 'Oldham', 'Oxford', 'Paisley', 'Pembroke', 'Penrith', 'Penzance', 'Perth', 'Peterborough', 'Peterhead', 'Plymouth', 'Poole', 'Portsmouth', 'Preston', 'Reading', 'Redditch', 'Reigate', 'Rochdale', 'Rochester', 'Romford', 'Rutland', 'Salisbury', 'Sheffield', 'Shetland Islands', 'Shrewsbury', 'Slough', 'Southampton', 'Southend', 'Southend-on-Sea', 'Stafford', 'Staines', 'St. Albans', 'Stansted', 'Stevenage', 'Stirling', 'Stockport', 'Stockton On Tees', 'Stoke-On-Trent', 'Stranraer', 'Stratford Upon Avon', 'Sunbury', 'Sunderland', 'Sutton', 'Swansea', 'Swindon', 'Tamworth', 'Taunton', 'Teesside', 'Telford', 'Thetford', 'Tonbridge', 'Torquay', 'Truro', 'Uxbridge', 'Wakefield', 'Walsall', 'Warrington', 'Warwick', 'Watford', 'Wellingborough', 'Welshpool', 'Welwyn Garden City', 'West Bromwich', 'Weston-Super-Mare', 'Wetherby', 'Weymouth', 'Wigan', 'Woking', 'Wolverhampton', 'Worcester', 'Workington', 'Worthing', 'Worthing Lancing', 'Yeovil', 'York', }]
</body>
</html>
最佳答案
看起来您的方向是正确的，但是，我建议您看看使用像 jQuery 这样的框架，因为这个任务会简单得多。
首先，查看 xmlhttp.responseText，您似乎需要更改您的 struts 配置，以便输出不是完整的 HTML 文档。服务器返回此响应的方式将使您很难处理。使这项工作按您希望的方式进行的快速方法是让服务器生成填充的选择标记。当您的源页面呈现时，在 div 元素内放置一个禁用的 select 标签，您可以像这样通过 ID 引用它 -
<div id="dynamicSelectTagHolder">
<select name="foo" disabled="true" />
</div>
一旦服务器生成结果，您可以使用 innerHTML 将 div#dynamicSelectTagHolder 的内容分配给服务器返回的文本 -
document.getElementById("dynamicSelectTagHolder").innerHTML = xmlhttp.responseText;
请注意，您当前的方法可能会遇到很多问题。对我来说已经有一段时间了，但如果我没记错的话，innerHTML 和 getElementById 并不是在所有浏览器上都能完美运行的东西。这就是我建议研究 jQuery 的原因。
关于java - 如何根据另一个保管箱的选择将数据填充到保管箱中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22433677/