Different values, same name

[trevorgerhardt]

I'm working with requirements that cause the select box to have options with the same name but different values.

Is there a reason behind keying the options object by name instead of value and therefore defaulting operations to .get by name?
Would it be possible to switch to value instead?
If not, would it be too confusing to add a fallback to lookup an option by value?

Append .get with something like:

var opt = this.options[name];
if (!opt) {
  each(this.options, function (k, option) {
    if (option.value === name) opt = option;
  });
}
if (!opt) throw new Error('option "' + name + '" does not exist');
return opt;

Other operations may need to updated also.

[ianstormtaylor]

thought this was weird when i first tried too, just because selecting by name gets weird when the keys are full sentences or whatever - curious though, whats the case where you want two entries to have the exact same name?

[yields]

you shouldn't treat name as label, it's just an id to let you manipulate options.

select().add('js', 100, '<em>Javascript</em>');
select().add('js2', 101, '<em>Javascript</em>');

this will change, since i find myself doing:

select().add(value, value, label).select(value); // => etc...

the signature should actually look like this:

add = function(value, label){};

where label can either be an element or html, so i'm keeping this open to implement this.

[trevorgerhardt]

@ianstormtaylor We're parsing GTFS data over at conveyal/transitive.js and different transit components (routes, patterns, stops) can have the same name. It's mainly a display issue as I could just add the id to the end of the label to differentiate but that's kind of ugly.

@yields Ah! Thanks, for now I'll just do value, value, label.

[jonathanong]

similar issue. i think select.get() should be select.get(value) or select.get(id). there should be a "unique" string to differentiate each option and name should be presentation. so adding would look kind of like:

// arity === 1
select.add(name)
id = name.toLowerCase().replace(/\s+/, '-').replace(/[^\w]/, '')

// arity === 2
select.add(id, name || HTML string || HTML element)

crap i just looked up and realized you basically suggested the same thing. :P but you should never reference an option by it's presentational name IMO.