Связанное меню выбора пользовательского интерфейса jQuery. Форма сбрасывается при нажатии кнопки

Я использую связанное меню выбора, чтобы помочь посетителю ответить на некоторые вопросы. Это работает как шарм, однако в конце пользователь должен нажать кнопку, чтобы отправить все значения в PHP-скрипт. Это также работает без проблем, однако, когда страница перезагружается (поскольку кнопка отправляет форму на ту же страницу), все поля снова скрываются, и это не то, что я хочу.

Я хотел бы, чтобы цепочечные меню выбора отображались, когда элементы в них «выбираются» при перезагрузке страницы. Используя PHP, я просто проверяю, было ли выбрано поле, и добавляю этот статус в меню выбора. Но они остаются скрытыми, пока вы снова не выберете все вручную.

Я думаю, что это просто небольшая корректировка в JS-части. Но мое ограниченное знание JS оставляет меня без решения.

Источники


person mat    schedule 18.07.2012    source источник


Ответы (1)


Поскольку форма отправляет сама себе значения, выбранные пользователем, будут доступны либо в $_GET, либо в $_POST (в зависимости от того, является ли action вашей формы get или post).

Лучшим подходом было бы использовать эти значения для установки атрибута selected на соответствующем узле <option>, используя что-то вроде этого.

$selectedC1Value = '';
<? if isset($_POST['c1']) { ?>
    $selectedC1Value = $_POST['c1'];
<? } ?>

<select name="c1" id="c1" >
    <option value="" <? if ($selectedC1Value == '') { echo 'selected'; } ?>>
        --
    </option>
    <option value="age" <? if ($selectedC1Value == '') { echo 'selected'; } ?>>
        Age
    </option>
    <option value="education" <? if ($selectedC1Value == '') { echo 'selected'; } ?>>
        Education
    </option>
    <!-- etc -->
</select>

Это нужно будет повторить для каждого <select> в вашем <form>.

person TJ VanToll    schedule 18.07.2012
comment
Да, я использую PHP для добавления выбранных узлов опций. Однако при обновлении страницы (из-за отправки формы) выбранные параметры присутствуют, но не отображаются. - person mat; 18.07.2012
comment
В этом случае все, что вам нужно сделать, это реорганизовать ваш JS, чтобы вызывать тот же метод, который вы вызываете при изменении, когда страница загружается. Я изменил вашу скрипку, чтобы показать это с первым из selectmenu виджетов - jsfiddle.net/tj_vantoll/kLDcL. Вы должны сделать явный вызов такого рода при загрузке страницы, selectmenu не будет автоматически запускать вашу change функцию. - person TJ VanToll; 19.07.2012
comment
Я разместил этот вопрос на нескольких форумах и пробовал (как новичок в JS) в течение нескольких дней. Вы мне очень помогли! Спасибо, я принял ответ и проголосовал. Могу я задать еще один вопрос? Есть еще одно поле, которое нужно показать, я пытаюсь, пока пишу этот пост, но мой разум сейчас в тумане. Не могли бы вы посмотреть, пожалуйста, проверьте: jsfiddle.net/kLDcL/1 Еще раз большое спасибо! - person mat; 19.07.2012
comment
Я думаю, что решил это: jsfiddle.net/kLDcL/2 Большое спасибо, вы спасли меня головные боли. - person mat; 19.07.2012
comment
Еще один небольшой вопрос. Я хотел бы показывать кнопку ТОЛЬКО, когда были выбраны select name=map[] и select name=mapb[]. Это возможно? - person mat; 23.07.2012