Question

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

问题

通过使用几个select选择值来指定B 框。问题是，取决于在一个中选择的值，其他选择中使用的集合应限定为仅显示相关选项。这是经典案例使用动态选择框（想想国家 - 州选择框），只有更多选择框，我想最初出现的所有选择框，所以用户可以从任何地方开始（首先选择州和国家选择框将其集合缩小到可以为该州选择的集合。）

当前方法

Bs呈现在一张桌子上，每行一张B，我想我可以在获取新集合后，使用AJAX替换表行（内容）从服务器。这显然需要一些事情。

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

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

添加B需要具有唯一标识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>

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

2 个答案: