Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/440.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 填充单选按钮下方的外部内容_Javascript_Jquery_Html - Fatal编程技术网

Javascript 填充单选按钮下方的外部内容

Javascript 填充单选按钮下方的外部内容,javascript,jquery,html,Javascript,Jquery,Html,要求2: <form method="post">States: <select name="Select1"> <option>NJ</option> <option>NY</option> <option>PA</option> <option>TX</option> </select&g

要求2:

<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">
$(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;
        }));
    });
});
现在让我在下拉菜单下面有两个单选按钮“是”或“否”

选择第一个下拉状态为“NY”,第二个下拉城市为“尼亚加拉”,点击“是”,则外部内容应根据相应的两个下拉值加载。如果“否”,则应加载相应的外部内容。假设任何内容都是您自己的示例。请帮我做这个。先谢谢你

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">
$(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;
        }));
    });
});

点击“是”和“否”@sarath请现在检查一下..我已经修改了代码。谢谢你。你做的事情。改变是非常令人困惑的。让它变得简单,只留下人们可以帮助你的代码。