Несколько зависимых динамических блоков выбора в форме - PullRequest
1 голос
/ 18 октября 2011

Существует модель A, которая has_many B, и форма, в которой можно создать новый A и добавить / удалить Bs. То есть есть ссылка Добавить новый B , который запускает какой-то Javascript, чтобы вставить еще один фрагмент, где заполняются значения для B. Все отлично работает.

Проблема

Задание B выполняется путем выбора значений с помощью пары select коробки. Проблема в том, что в зависимости от значения, выбранного в одном, коллекции, используемые в других выборках, должны иметь область видимости, чтобы показывать только соответствующие опции. Это классический чехол с динамическими полями выбора (думаю, страны - поля выбора государства), только с более выберите поля, и я бы хотел, чтобы все поля выбора отображались изначально, поэтому пользователь может начать с любого места (сначала выберите штат и выберите страну) сужает свою коллекцию до тех, которые могут быть выбраны для этого состояния).

Текущий подход

B отображаются в таблице, по одному B на строку, и я думал, что смогу используйте AJAX для замены строки таблицы (содержимого) после извлечения новых коллекций с сервера. Очевидно, что для этого нужна пара вещей.

  • tr тег должен иметь уникальный атрибут id, поэтому можно использовать replace_html.
  • необходимо иметь триггер при изменении для каждого поля выбора
  • необходимо передать значения всех полей выбора (для этой строки) на сервер

Я застрял здесь из-за следующего:

  • добавление B должно иметь что-то уникальное, чтобы идентифицировать тег tr. как все выбирает в этом ряду. Я могу использовать Time.now.to_i, но это не работать на Javascript по ссылке, чтобы добавить новый B, потому что это будет жестко закодировать значение и все использовать то же самое.
  • не уверен, стоит ли мне идти с observe_field или удаленным вызовом в списке выбора помощник поля формы.
  • как собрать значения всех выборок в одной строке и передать их удаленно на сервер при срабатывании?

Проект, над которым я работаю, это Rails 1.2.3 и использует Prototype. Пожалуйста, не стесняйтесь публиковать "более новые" решения, потому что мне любопытно увидеть различные решения.

Любая помощь по этому вопросу высоко ценится. Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 18 октября 2011

Это не отвечает на весь ваш вопрос, но может помочь вам начать.Я обрабатываю это так ... это для записи в плейлисте, где пользователь может добавлять новые формы в 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 в качестве аргумента функции ... но он отлично работает.

0 голосов
/ 22 октября 2012

Динамически зависимые поля выбора Как создать зависимый выпадающий список в 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>
...