要求2:
现在让我在下拉菜单下面有两个单选按钮“是”或“否”。
选择第一个下拉状态为“NY”,第二个下拉城市为“Niagara”并单击“是”,然后外部内容应根据相应的两个下拉值加载。如果“否”,则应加载相应的外部内容。假设任何内容都是您自己的一个例子。请帮助我。提前谢谢。
HTML代码:
<form method="post">States:
<select name="Select1">
<option>NJ</option>
<option>NY</option>
<option>PA</option>
<option>TX</option>
</select>
</form>
<br>
<br>
<form method="post">City List:
<select name="Select2">
<option>Trenton</option>
<option>Albany</option>
<option>Philly</option>
<option>Newark</option>
<option>NYC</option>
<option>Pittsburgh</option>
<option>Hackensack</option>
<option>Niagara</option>
<option>Harrisburg</option>
</select>
</form>
<label>Yes</label>
<input type="radio" name="radio" value="Yes" id="yes">
<label>No</label>
<input type="radio" name="radio" value="No" id="no">
JavaScript代码:
$(function () {
var $States = $('select[name=Select1]');
var $Cities = $('select[name=Select2]');
var $citiesList = $Cities.find('option').clone();
var workerandFruits = {
NJ: ["Trenton", "Newark", "Hackensack"],
NY: ["Albany", "NYC", "Niagara"],
PA: ["Philly", "Pittsburgh", "Harrisburg"]
}
$States.change(function () {
var $selectedWorker = $(this).find('option:selected').text();
$Cities.html($citiesList.filter(function () {
return $.inArray($(this).text(), workerandFruits[$selectedWorker]) >= 0;
}));
});
});