Выбор опций из выпадающего

Question

Я создаю рецепт поиска нового блога еды. Дизайн, который у меня есть, заключается в основном в том, что пользователь выбирает ингредиенты по одному из раскрывающегося списка <select>, вариант исчезает из списка (поэтому они не могут выбрать его снова) и появляется в другом HTML-списке со ссылкой на удалить его из списка. Как только они закончили, они нажимают кнопку, и она переносит их на страницу результатов.

Вот разметка выбора, сгенерированная PHP:

<select>
    <option value="">Please select</option>
    <option value="beef-mince">Beef mince</option>
    <option value="carrots">Carrots</option>
    ...
</select>

Это не очень сложно, но это поднимает несколько вопросов о том, как я собираюсь делать некоторые из этих вещей. Я использую jquery.

1. Мне нужно сохранить выбранные элементы в памяти, чтобы я знал, что отправить на страницу поиска, когда они закончили выбирать элементы. Как, по вашему мнению, лучше всего это сделать, поскольку каждый элемент имеет два значения (его «реальное» значение и значение в базе данных)?

2. Как мне сделать «Пожалуйста, выберите» выбранную опцию после того, как они что-то выбрали (предпочтительно без запуска события onchange)?

3. Как только я сохранил это в памяти и добавил к отображаемому списку вещей, которые они ищут, как мне удалить этот предмет из доступных предметов? Могу ли я просто «спрятать» или отключить (безопасно)?

4. Если в # 3 мне нужно удалить его из DOM, когда я добавлю его снова, могу ли я отсортировать список (на основе любого значения) и сохранить опцию пожалуйста, выберите вверху?

Answer 1

1. Вы можете сохранить «два значения» в скрытом поле формы как объект в нотации JSON. Это облегчит изменение в jQuery, когда пользователь взаимодействует со страницей.

2. Вам нужно будет использовать комбинацию события onchange, keyup и keydown, чтобы зафиксировать возможные изменения в форме, чтобы вы могли повторно выбрать опцию «Пожалуйста, выберите».

3. Вам нужно будет удалить опцию из DOM и добавить ее позже. Вы можете легко сделать это через jquery через что-то вроде этого:

   $ («выбрать вариант: выбранный»). Удалить ();

4. Вы можете написать функцию сортировки для опций, начиная с индекса 1, и оставить «Пожалуйста, выберите» в качестве первой опции.

Answer 2

1.) На страницу можно добавлять скрытые элементы формы, значение которых равно значению выбранного параметра.

2). jQuery("#select-list")[0].options[0].selected = true // assuming it's the first item

3.) Я бы удалил элемент из DOM с помощью jQuery ("# ​​select-list option: selected").

4.) Вы можете использовать до (). jQuery (your_default_option) .before ("опция # select-list: first");

Answer 3

1) Основная идея, вы должны проверить, чтобы убедиться, что первое не выбрано

var selections = [];
var mySel = document.getElementById("mySelectId");
var ind = mySel.selectedIndex;
selections.push( mySel.options[ind].value ); //add to a list for you to remember
mySel.options[ind] = null; //remove

2) mySel.selectedIndex = 0;

3) Смотри # 1

4) Да, вы можете добавить его куда угодно, используя insertBefore

Пример здесь: http://www.pascarello.com/lessons/forms/moveSelectOptions.html

Answer 4

Оставлю этот ответ здесь, но я думаю, что я не прочитал весь ваш пост, поэтому он может не сильно помочь.

Вам нужно указать свой идентификатор, подобный следующему:

<select id="MySelect">        
    <option value="">Please select</option>
    <option value="beef-mince">Beef mince</option>
    <option value="carrots">Carrots</option>
    ...
</select>

А чтобы получить это просто что-то вроде этого:

<?php
    $value = $_REQUEST["MySelect"];
    echo $value;
?>

Код не проверен, и $ _REQUEST можно заменить на $ _GET или $ _POST в зависимости от того, что вы указали в качестве действия в своей форме. Хотя $ _REQUEST все это съест.