Question

我的表单有一个选择元素和一组单选按钮。单选按钮的值（和标签）取决于select元素中选择的选项。我的计划是部分放置单选按钮，当所选选项发生变化时，进行AJAX调用以检索它的更新版本，然后将其重新插入表单。

这是一个明智的解决方案吗？我知道Angular可以更好地处理这个问题，但将此页面转换为Angular应用程序可能超出了这个小项目的范围。

编辑：我想我真正想问的是，对于单选按钮进行AJAX调用是否比使用页面上的所有单选按钮并使用js /更好的解决方案jquery操纵它们（显示/隐藏，检查/取消选中）。

Answer 1

根据要求，这是一种使用本机/香草Javascript的通用方法。这是必须加载单选按钮的页面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo radio loading w/ Ajax</title>
<style>
#radioContainer {
    width: 275px;
    height: 125px;
    border: 1px solid black;
    padding: 10px;
}
h3 {
    margin-top: 0;
}
label {
    display: inline-block;
    width: 150px;
}
</style>
</head>
<body>

    <form name="theForm">

        <select name="preSelector" onchange="loadRadios()">
            <option value=""> Select the car brand </option>
            <option value="audi.html"> Audi </option>
            <option value=""> BMW </option>
            <option value=""> Mercedes </option>
        </select>

        <div id="radioContainer">

        </div>

    </form>

    <script>
    function loadRadios() {
        var selectValue = filePath = theForm.elements['preSelector'].value;
        var radioContainer = document.getElementById('radioContainer');
        var ajaxRequest = new XMLHttpRequest();
        if (selectValue != '') {
            ajaxRequest.onreadystatechange = function() {
                if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                    radioContainer.innerHTML = ajaxRequest.responseText;
                }
            }
            ajaxRequest.open('GET',filePath,true);
            ajaxRequest.send();
        }
    }
    </script>

</body>
</html>

这是带有奥迪收音机按钮的文件的整个代码，audi.html：

<h3>Audi</h3>

<label>4-wheel drive: </label> yes <input type="radio" name="audi_4wheel" value="yes"> no <input type="radio" name="audi_4wheel" value="no">
    <br>
<label>Airconditioning: </label> yes <input type="radio" name="audi_airco" value="yes"> no <input type="radio" name="audi_airco" value="no">
    <br>
<label>Metallic paint: </label> yes <input type="radio" name="audi_metallic" value="yes"> no <input type="radio" name="audi_metallic" value="no">

。
该文件应与＆＃39;母版页面放在同一目录中，或者必须调整路径。

我假设您不需要为IE6编码;该代码适用于IE7 +和所有其他浏览器。我认为，对于你来说，代码几乎是不言自明的，其余的。如果没有，请发表评论问题，我很乐意回答。

动态填充基于选择元素选择的单选按钮

1 个答案: