jQuery HTML select drop down need two values but display/submit one. Second value used to select another drop down option

Question

Ok here goes:

I have a SELECT drop down option with US state names

<select>
  <option value="ca">california</option>
  <option value="ut">utah</option>
  <option value="mi">michigan</option>
</select>

but I also need to associate another value with this that's hidden to the page view. I can not use class, name or id to populate the second value as they are used already. and can only have one value in the value attribute cause this is being added to a database. Is there another attribute I could pass the second value in as a place holder or something? the true, false and undecided values are associated with the states in a database and need to be associated together. I guess I could also do a hidden SELECT element but then the question is how to I relate the hidden SELECT to the other two SELECTS?

<select>
  <option value="ca">california</option> <!-- true-->
  <option value="ut">utah</option>       <!-- undecided-->
  <option value="mi">michigan</option>   <!-- false-->
  <option value="oh">ohio</option>       <!-- false-->
  <option value="az">arizona</option>    <!-- undecided-->
  <option value="dc">wash dc</option>    <!-- false-->
</select>

Now with the second value added (somehow) to the first SELECT drop down I need a way to select a second SELECT drop down based on the first SELECT drop down option selected.

<select>
  <option value="t">true</option>
  <option value="f">false</option>
  <option value="u">undecided</option>
</select>

so if the user selects "wash dc" the second SELECT drop down should be defaulted to false.

I'm using jQuery for JavaScript if this helps and I think I could do the second part of this problem but how do I do the first part?

Answer 1

You could use the class attribute as follows:

<select>
  <option class="someclass true" value="ca">california</option> <!-- true-->
  <option class="someclass undecided" value="ut">utah</option>  <!-- undecided-->
  <option class="someclass false" value="mi">michigan</option>  <!-- false-->
</select>

The class attribute can contain more than one classes separated by spaces.

You could also create a custom attribute. This would break HTML(XHTML) validation of your page though.

Answer 2

Load the information as an array in JavaScript. Either hard code it (bad), or send it along as a separate AJAX query (better). That will both give you the data you need, and make it easier to access when you need it since it will already be in memory, not stored as part of the page.

Answer 3

Can not use class, name or id to populate the second value as they are used already. and can only have one value in the value attribute

Ok so saying you cannot any of use these(common) methods is limiting your choices. Since you are already using jQuery, the .data() function comes to mind. It basically allows you to store key/value pairs on any given DOM object. So you could spin through all your options in the list and

$('#selectID options').each(function(){
    $.data($(this), 'key', 'value')
});

More info on .data() here

Edit:

There would be no change at all to your HTML structure, which sounds like it's a bonus in this situation. The .data() function just allows you to store 'metadata' for any existing html element on your page. If you were to view source on the page, there would be no trace of this data. It gets stored somewhere in jQuery land, and I can't speak to exactly how this mechanism works although I assume it's just a layer of abstraction on a basic JavaScript array. In this case, you are going to be attaching a peice of data to each of your < option > elements.

So to set the data you use the loop as shown above. Then to retrieve the data you just need to know which option is currently selected, and then use .data() and the key again to get the value back.

var storedValue = $.data( $('#selectID option:selected'),'key' )

The retrieval is easy, I expect your challenge is going to be getting the data so you can set it. One way would be to generate the javascript on the server side and then emit it to the page. You may end up not using the loop as I'm going to assume each value is unique, it may look something more like:

$.data( $('#selectID options:eq(0)'), 'key', 'value1' );
$.data( $('#selectID options:eq(1)'), 'key', 'value2' );
$.data( $('#selectID options:eq(2)'), 'key', 'value3' );
$.data( $('#selectID options:eq(3)'), 'key', 'value4' );

'value1' could be anything, including a json string that would allow you to store several values with one key if need be.

And finally, if you are going to using this functionality repeatedly it would be pretty easy to create a jQuery plugin that lets you do so with a bit less legwork, but that's an answer for another question.