表单中的多个相关动态选择框

Question

有一个模型 A，has_many B 和一个可以创建新 A 和表单的表单 添加/删除 B。即，有一个链接添加新的 B，它运行一些 Javascript 来插入另一个部分，其中填写 B 的值。一切正常。

问题

指定 B 是通过使用几个 select 选择值来完成的 盒子。问题是，根据其中选择的值， 其他选择中使用的集合的范围应限制为仅显示相关选项。这是经典案例 具有动态选择框（认为国家/地区选择框），仅具有更多 选择框，我希望所有选择框最初都出现，所以 用户可以从任何地方开始（首先选择州和国家选择框 将其集合范围缩小到可以为该状态选择的集合）。

当前方法

B 呈现在表格中，每行一个 B，我想我可以 获取新集合后使用 AJAX 替换表行（内容） 从服务器。这显然需要做好几件事。

• tr标签必须有唯一的id属性，因此可以使用replace_html。
• 需要对每个选择框的更改有一个触发器
• 需要将所有选择框的值（针对该行）传递到服务器

我被困在这里，因为以下原因：

• 添加 B 需要有一些唯一的东西来标识 < code>tr 标签 作为该行上的所有选择。我可以使用 Time.now.to_i 但那不会 为链接运行的 Javascript 工作以添加新的 B，因为这将 对值进行硬编码，并且全部使用相同的值。
• 不确定我是否应该使用 observe_field 还是选择中的远程调用 表单字段助手。
• 如何获取一行中所有选择的值并远程传递 触发时到服务器？

我正在从事的项目是Rails 1.2.3并使用Prototype。请随意发布“更新的”解决方案，因为我很好奇看到不同的解决方案。

对此的任何帮助都将受到高度赞赏。提前致谢！

Answer 1

这并不能回答您的全部问题，但它可能会帮助您开始。我这样处理...这是用于播放列表条目，用户可以在 div #playlist-entry 中添加新表单，每个表单都是 .new_song_form 以及隐藏字段 .form_num （我在 create.js.erb 文件中使用它来告诉它隐藏/警告验证错误的表单，这并不真正相关我猜对你来说）。

var form_counter = 1;

function addSongFields() {
    playlistEntry = $('#playlist-entry');
    playlistEntry.append("<%= escape_javascript(render :partial => 'playlist_entry_form', :locals => { :schedule_event => @schedule_event, :playlist_entry => PlaylistEntry.new }) %>");
    playlistEntry.find('.new_song_form:last').attr('id', 'new_song_form_'+form_counter);
    playlistEntry.find('.form_num:last').val('new_song_form_'+form_counter);
}

$(document).ready(function() {  
    $('#add-song-link').click(function(event) {
        event.preventDefault();
        addSongFields();
        form_counter++;
    });
});

这个表单有点不同，因为没有一个“主要”表单需要提交，它是一堆表单都在一个页面上，但这个基本想法可能会对您有所帮助。这不是完美的编程 - 例如我应该将 form_counter 作为参数传递给函数......但它工作得很好。

Answer 2

动态相关选择框
如何在php中创建依赖下拉列表？我搜索了很多然后实现了这个。这是使用 HTML、JS、PHP 简单依赖下拉框创建的。

我知道可以使用 PHP、MySQL 和 JavaScript 创建动态依赖下拉表单，

但在需要向学生授课之前我从来没有借口使用它。

<?php

$region = $country = $state = $city = null; //declare vars

$conn = mysql_connect('localhost', 'username', 'password');
$db = mysql_select_db('selects',$conn);

if(isset($_GET["region"]) && is_numeric($_GET["region"]))
{
    $region = $_GET["region"];
}

if(isset($_GET["country"]) && is_numeric($_GET["country"]))
{
    $country = $_GET["country"];
}

if(isset($_GET["state"]) && is_numeric($_GET["state"]))
{
    $state = $_GET["state"];
}

if(isset($_GET["city"]) && is_numeric($_GET["city"]))
{
    $city = $_GET["city"];
}

?>

<script language="JavaScript">

function autoSubmit()
{
    var formObject = document.forms['theForm'];
    formObject.submit();
}

</script>

<form name="theForm" method="get">

    <!-- REGION SELECTION -->

    <select name="region" onChange="autoSubmit();">
        <option value="null"></option>
        <option VALUE="1" <?php if($region == 1) echo " selected"; ?>>East</option>
        <option VALUE="2" <?php if($region == 2) echo " selected"; ?>>West</option>
    </select>

    <br><br>

    <!-- COUNTRY SELECTION BASED ON REGION VALUE -->

    <?php

    if($region != null && is_numeric($region))
    {

    ?>

    <select name="country" onChange="autoSubmit();">
        <option VALUE="null"></option>

        <?php

        //POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN REGION

        $sql = "SELECT COUN_ID, COUN_NAME FROM COUNTRY WHERE RE_ID = $region";
        $countries = mysql_query($sql,$conn);

        while($row = mysql_fetch_array($countries))
        {
            echo ("<option VALUE=\"$row[COUN_ID]\" " . ($country == $row["COUN_ID"] ? " selected" : "") . ">$row[COUN_NAME]</option>");
        }

        ?>

    </select>

    <?php

    }

    ?>

    <br><br>

    <?php

    if($country != null && is_numeric($country) && $region != null)
    {

    ?>

    <select name="state" onChange="autoSubmit();">
        <option VALUE="null"></option>

        <?php

        //POPULATE DROP DOWN MENU WITH STATES FROM A GIVEN REGION, COUNTRY

        $sql = "SELECT STAT_ID, STAT_NAME FROM states WHERE COUN_ID = $country ";
        $states = mysql_query($sql,$conn);

        while($row = mysql_fetch_array($states))
        {
            echo ("<option VALUE=\"$row[STAT_ID]\" " . ($state == $row["STAT_ID"] ? " selected" : "") . ">$row[STAT_NAME]</option>");
        }

        ?>    

    </select>

    <?php

    }

    ?>

    <br><br>

    <?php

    if($state != null && is_numeric($state) && $region != null && $country != null)
    {

    ?>

    <select name="city" onChange="autoSubmit();">
        <option VALUE="null"></option>

        <?php

        //POPULATE DROP DOWN MENU WITH CITIES FROM A GIVEN REGION, COUNTRY, STATE

        $sql = "SELECT CIT_ID, CITY_NAME FROM CITY WHERE STAT_ID = $state ";
        $cities = mysql_query($sql,$conn);

        while($row = mysql_fetch_array($cities))
        {
            echo ("<option VALUE=\"$row[CIT_ID]\" " . ($city == $row["CIT_ID"] ? " selected" : "") . ">$row[CITY_NAME]</option>");
        }

        ?>    

    </select>

    <?php

    }

    ?>

</form>