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

【问题标题】：Dynamically populate radio buttons based select-element choice动态填充基于选择元素选择的单选按钮
【发布时间】：2014-07-28 00:53:54
【问题描述】：

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

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

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

【问题讨论】：

我确实对表单和 Ajax 略知一二，但是“我的计划是将单选按钮放在一个部分中”是什么意思？什么是部分？
在 Rails 中，partial 是一块可以插入页面的视图代码（动态生成的 html）
好的，那么您的问题是关于 RoR 而不是 Ajax？如果是这样，恐怕我无法帮助你。
我对一般方法感兴趣，而不是特定于框架。

标签： ruby-on-rails dynamic radio-button

【解决方案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">

.
该文件应与“母页”放在同一目录中，否则必须调整路径。

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

【讨论】：