Ruby on rails 基于选择元素选择动态填充单选按钮_Ruby On Rails_Dynamic_Radio Button

Ruby on rails 基于选择元素选择动态填充单选按钮

ruby-on-rails dynamic

Ruby on rails 基于选择元素选择动态填充单选按钮,ruby-on-rails,dynamic,radio-button,Ruby On Rails,Dynamic,Radio Button,我的表单有一个select元素和一组单选按钮。单选按钮的值（和标签）取决于在“选择”元素中选择的选项。我的计划是将单选按钮放在部分中，当所选选项发生更改时，进行AJAX调用以检索更新版本，然后将其重新插入表单中这是一个合理的解决方案吗？我知道Angular可以更好地处理这个问题，但将此页面转换为Angular应用程序可能超出了这个小项目的范围编辑：我想我真正想问的是，对单选按钮进行AJAX调用是否比将所有单选按钮都放在页面上并使用js/jquery操作它们（显示/隐藏、选中/取消选中）更好。

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

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

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

根据要求，这里是一种通用方法，使用本机/普通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>


演示无线加载w/Ajax
#无线电容器{
宽度：275px；
高度：125px；
边框：1px纯黑；
填充：10px；
}
h3{
边际上限：0；
}
标签{
显示：内联块；
宽度：150px；
}
选择汽车品牌
奥迪
宝马
梅赛德斯
函数loadRadios（）{
var selectValue=filePath=form.elements['preSelector'].value；
var radioContainer=document.getElementById（'radioContainer'）；
var ajaxRequest=new-XMLHttpRequest（）；
如果（选择值！=''）{
ajaxRequest.onreadystatechange=函数（）{
if（ajaxRequest.readyState==4&&ajaxRequest.status==200）{
radioContainer.innerHTML=ajaxRequest.responseText；
}
}
打开（'GET'，filePath，true）；
ajaxRequest.send（）；
}
}

这是奥迪单选按钮文件的全部代码，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+和所有其他浏览器。我应该认为，对于您来说，代码基本上是不言自明的。如果没有，就发一个评论问题，我很乐意回答

关于表单和Ajax，我确实知道一两件事，但是“我的计划是把单选按钮放在一个部分”是什么意思呢？什么是partial？在Rails中，partial是可以插入到pageOK中的一段视图代码（动态生成的html），那么您的问题是关于RoR的，而不是关于Ajax的？如果是这样的话，恐怕我帮不了你。我感兴趣的是一般方法，而不是特定于框架的方法。