I've got a few comments on this.
Firstly, your HTML is not as semantic as it might be. I'd prefer that
'feature' is a ul with li's inside, maybe with a delete button next to
each. A select might be confusing to the user as they can't see all
the features they have straight away. This is more a listing, within
which you can select a feature to delete, than it is a dropdown menu
from which you can delete features.
Secondly, I haven't run your code but I have concerns over this:
var newOption = new Element('option', { name: feature, id: feature,
text: feature });
You should enter a value into the option as well, if you're going to
use select/options here or I'm pretty sure that constitutes invalid
HTML (again like everything I ever write on forums this is just my
best guess, but I'm 95% sure! Check the specs at w3.org for more
info).
Next comment: I've never used element#add, I'd go with element#insert
which I know works fine.
Finally, how are you looping through the 'feature' attribute? This is
almost certainly where you're going wrong.
If you're doing this server side, the form doesn't know of any values
inside feature. That's because none of your options in the feature
select currently have a value. You'll run into another problem here,
though, in that only one option will ever be selected so you'll get
the first added to the select each time rather than all. Look into
using a ul as suggested above, or if you must stick to a select, make
it a multiselect and when you add items to it, set the selected
attribute = 'selected' on the element.
If you're looping through the 'feature' attribute in JS, post your
code. It should look something like this:
var featuresAdded = new Array();
$('feature').select('option').each(function(item)
{ featuresAdded.push(item.id); });
console.log(featuresAdded); // array of added features, each as a
string
On Sep 9, 9:03 pm, cyiam <[EMAIL PROTECTED]> wrote:
> Hello. I am fairly new to Prototype. Here's what I want to do. I have
> 2 select lists. One list (id="featureList") has a list of all
> possible feature for a car. The other list (id="feature") is
> initially blank. Here's the initial HTML"
>
> <ol><li>
> <select id="feature" multiple name="feature" size="5"></select>
> <button id="removeFeature" name="removeFeature" value="Remove
> Feature"> >>Remove </button>
> <button id="addFeature" name="addFeature" value="Add Feature">
> <<Add</button>
> <select id="featureList" multiple name="featureList" size="5" >
> <option value="TV">TV</option>
> <option value="XM Radio">XM Radio</option>
> <option value="Air Conditioned">Air Conditioned</option>
> <option value="Tinted Windows">Tinted Windows</option>
> <option value="GPS">GPS</option>
> </select>
> </li></ol>
>
> When a user clicks on one or more feature from "featureList", I do the
> following:
> var newOption = new Element('option', { name: feature, id: feature,
> text: feature });
> $('feature').add(newOption);
>
> So far so good. "feature" will now contain the features selected from
> "featureList".
>
> But when the user clicks the "Submit" button on the form, I intercept
> the submit and loop through the "feature" attribute, and it is empty!
> Visually, the list is populated, but the form, doesn't seem to know
> it!
>
> HELP!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
