根据第一个选择下拉列表的选择填充第二个选择下拉列表，并填充radiobuttons下面的外部内容

Question

我在一个HTML页面中有两个下拉列表A，B和两个标记为Yes，No的单选按钮。让我们举一个例子。

下拉A包含 - 车辆，宠物，人类，马达和2轮车

下拉列表B - 基于一个列表选项选择它应该生成下拉列表B.

即。如果选择“车辆”，列表B应生成“车辆，马达，宠物”。 如果选择“人”，列表B应生成“马达，2轮车”等。

根据两个下拉值，单击按钮会在单击“是”时生成其下方的某些字段，否则单击“否”时应显示其他字段。

请任何擅长此事的人，请帮我解决这个问题。我正在使用jquery mobile，它不适合我。无论如何，提前谢谢你。

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>

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;
        }));
    });
});

要求2：

现在让我在下拉菜单下面有两个单选按钮“是”或“否”。

选择第一个下拉状态为“NY”，第二个下拉城市为“Niagara”并单击“是”，然后外部内容应根据相应的两个下拉值加载。如果“否”，则应加载相应的外部内容。假设任何内容都是您自己的一个例子。请帮助我。提前谢谢。