Selecting options from a drop down

Question

I'm building a recipe-finder for a new food blog. The design I have basically involves the user selecting ingredients, one at a time, from a drop down <select>, the option disappearing from the list (so they can't select it again) and appearing on another HTML list with a link to remove it from the list. Once they're done, they click a button and that takes them through to a results page.

Here's the select markup as generated by the PHP:

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

It's not drastically complex but it does raise a few questions on how I'm going to do some of these things. I'm using jquery.

1. I need to store the selected items in memory so I know what to send to the search page when they've done selecting items. What's the best way of doing that in your opinion as each item has two values (its "real" value and its database-value)?

2. How do I make "Please select" the selected option after they've selected something (preferable without triggering the onchange event)?

3. Once I've stored it in memory and added it to the displayed list of things they're searching for, how do I delete that item from the available items? Can I just "hide" or disable it (safely)?

4. If in #3 I have to delete it from the DOM, when I add it again, can I sort the list (based on either value) and keep the please-select option at the top?

Answer 1

Will leave this answer here but I think I failed to read your whole post, so it might not help much.

You need to give your select a id like this:

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

And to get it is just something like this:

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

Code is not tested and $_REQUEST can be replaced by $_GET or $_POST regarding what you have specified as action on your form. $_REQUEST will eat it all though.

Answer 2

1.) You can append hidden form elements to the page whose value is the value of the selected option.

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

3.) I would remove the element from the DOM using jQuery("#select-list option:selected").remove()

4.) You can use before(). jQuery(your_default_option).before("#select-list option:first");

Answer 3

1) Basic idea, you need to check to make sure the first is not picked

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) See #1

4) Yes you can add it anywhere you want by using insertBefore

Example here: http://www.pascarello.com/lessons/forms/moveSelectOptions.html

Answer 4

1. You can store the 'two values' in a hidden form field as an object in JSON notation. This will make it easy to modify in jQuery as the user interacts with the page.

2. You will need to use a combination of the onchange, keyup and keydown event to capture possible changes to the form so that you can re-select the 'Please Select' option.

3. You will need to remove the option from the dom and re-add it later. You can easily do this through jquery through something like this:

   $("select option:selected").remove();

4. You can write a sorting function for the options starting with index 1, and keep the 'Please Select' as the first option.