-4

I'm working on a form right now that has a question pertaining to location, namely U.S. states. The question is such that it can be answered by one or more state selections. My question is, what's the best way to go about doing this?

The only thing I can think of is to use JS to determine if "State by state" is selected in a dropdown, and if so a small frame of some sort comes up with all 50 states as check boxes. I'm trying to avoid having all 50 state check boxes cluttering up my form. I suppose another option would be to have a hidden div that appears only when the "state by state" option is selected.

But I'm sure there's been others that have done this before, and if they've found an effective solution, I'd hate to reinvent the wheel.

Any help would be much appreciated!

Tim Aych
  • 1,365
  • 4
  • 16
  • 34

2 Answers2

3

Try:

<select name='states' multiple size=10>
<option....
</select>
  • It's good and simple solution, too bad many users don't get it. You'd have to explain the ctrl+click thing to them :( – pawel Sep 20 '13 at 12:14
  • True, also the shift+click but a brief message next to, or under the combobox usually suffices :-) –  Sep 20 '13 at 12:17
1

A single <select> and s button "add another state" which duplicates the element?

HTML:

<div>
<select name="states[]" id="states">
    <option>AL</option>
    <option>CA</option>
    <option>IL</option>
    <option>WA</option>
</select>
</div>
<span id="add">+ Add another state</span>

JS

var states = document.getElementById('states'),
    add = document.getElementById('add');

add.addEventListener('click', function(){
    states.parentNode.appendChild( states.cloneNode(true) );
});

http://jsfiddle.net/dx4CP/

pawel
  • 35,827
  • 7
  • 56
  • 53
  • This is a great idea, never thought to do this. Thanks – Tim Aych Sep 20 '13 at 12:17
  • addEventListener is not compliant with Internet Explorer :-( See http://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer –  Sep 20 '13 at 12:23
  • @jeff Good point, but it's trivial to fix and waaay out of the scope of this question which isn't about code at all ;) – pawel Sep 20 '13 at 12:29