html select

Retrieving HTML select values with jQuery

Snippet Instead of being asleep at 15:37 on 11 August 2009, kitt created this:

Ways to select the various option values from a select list, using jQuery.

/*
<select name="payment" id="selectList">
 <option value="1">Visa</option>
 <option value="2">Mastercard</option>
 <option value="3">American Express</option>
 <option value="4">JCB</option>
</select>
*/
 
 
$('#selectList').val(); 
// returns value of options 1, 2, 3, or 4
 
$('#selectList :selected').text()
// returns text of options Visa, Mastercard, if selected
 
// multiple select:
var sel = [];
$('#multiple :selected').each(function(i, selected) {
  sel[i] = $(selected).text();
});

States of US as selected HTML select from array

Snippet Posted by kitt at 00:15 on 9 August 2009

Render an array of USA states as an HTML select / option of USA states, with the current one selected.

/* output directly to screen */
function output_directly($current_state) {
 
  global $states;  // see /snip/states-us-php-array for this array
 
  print "<select name=\"state\">\n";
  print '<option value="" ' . (empty($current_state) ? 'selected="selected"' : '') . ">Select a State</option>\n";
 
  foreach ($states as $abbr => $state) {
    print '<option value="' . $abbr . " " . ($current_state == $abbr ? 'selected="selected"' : '') . '>' . $state . "</option>\n";
  }
 
  print "</select>\n";
}
 
 
/**
 * @param current state
 * @return string of HTML select with states as option
 */
function return_html_string($current_state) { 
 
  // really now, shouldn't $states be a statically defined var?
  global $states;
 
  $c = "<select name=\"state\">\n";
  $c .= '<option value="" ' . (empty($current_state) ? 'selected="selected"' : '') . ">Select a State</option>\n";
 
  foreach ($states as $abbr => $state) {
    $c .= '<option value="' . $abbr . " " . ($current_state == $abbr ? 'selected="selected"' : '') . '>' . $state . "</option>\n";
  }
 
  $c .= "</select>\n";
 
  return $c;
}

States of US as an HTML select

Snippet Posted by kitt at 23:30 on 8 August 2009 
<select name="State"> 
<option value="" selected="selected">Select a State</option> 
<option value="AL">Alabama</option> 
<option value="AK">Alaska</option> 
<option value="AZ">Arizona</option> 
<option value="AR">Arkansas</option> 
<option value="CA">California</option> 
<option value="CO">Colorado</option> 
<option value="CT">Connecticut</option> 
<option value="DE">Delaware</option> 
<option value="DC">District Of Columbia</option> 
<option value="FL">Florida</option> 
<option value="GA">Georgia</option> 
<option value="HI">Hawaii</option> 
<option value="ID">Idaho</option> 
<option value="IL">Illinois</option> 
<option value="IN">Indiana</option> 
<option value="IA">Iowa</option> 
<option value="KS">Kansas</option> 
<option value="KY">Kentucky</option> 
<option value="LA">Louisiana</option> 
<option value="ME">Maine</option> 
<option value="MD">Maryland</option> 
<option value="MA">Massachusetts</option> 
<option value="MI">Michigan</option> 
<option value="MN">Minnesota</option> 
<option value="MS">Mississippi</option> 
<option value="MO">Missouri</option> 
<option value="MT">Montana</option> 
<option value="NE">Nebraska</option> 
<option value="NV">Nevada</option> 
<option value="NH">New Hampshire</option> 
<option value="NJ">New Jersey</option> 
<option value="NM">New Mexico</option> 
<option value="NY">New York</option> 
<option value="NC">North Carolina</option> 
<option value="ND">North Dakota</option> 
<option value="OH">Ohio</option> 
<option value="OK">Oklahoma</option> 
<option value="OR">Oregon</option> 
<option value="PA">Pennsylvania</option> 
<option value="RI">Rhode Island</option> 
<option value="SC">South Carolina</option> 
<option value="SD">South Dakota</option> 
<option value="TN">Tennessee</option> 
<option value="TX">Texas</option> 
<option value="UT">Utah</option> 
<option value="VT">Vermont</option> 
<option value="VA">Virginia</option> 
<option value="WA">Washington</option> 
<option value="WV">West Virginia</option> 
<option value="WI">Wisconsin</option> 
<option value="WY">Wyoming</option>
</select>