What Values Can Appear in the "Selected" Attribute of the "Option" Tag

What values can appear in the selected attribute of the option tag?

Different browser may treat this attribute differently. According to the MSDN documentation (for Internet Explorer):

To select an item in HTML, it is not
necessary to set the value of the
SELECTED attribute to true. The mere
presence of the SELECTED attribute set
its value to true.

In firefox and Safari this does work:

<option selected='false' />

From what I can tell by looking at the official WC3 standard for HTML4, the supported case is only:

<option selected='selected' />

You will either need to selectively emit the attribute, or use javascript to control which item is initially selected.

What if value for select option is not specified in html select tag

basically you're right, seeing MDN docs at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Each element should have a value attribute containing the
data value to submit to the server when that option is selected; if no
value attribute is included, the value defaults to the text contained
inside the element. You can include a selected attribute on an
element to make it selected by default when the page first
loads.

so yeah you're right, it assumes what you're showing in the html tag as the value

How to get the value of option with attribute selected

I think alexis actually wants something more like this:

function onChangeOption(opt) {  var update_value = opt.value;  var options = document.getElementsByTagName("option");  if (options[0].getAttribute("selected")=="selected") {    var selectedValue = options[0].value;  } else {    var selectedValue = options[1].value;  }  if (update_value != selectedValue) {    // If the selected option's value is not equal to the value of the option with the attribute "selected", then do... (this way, you can change the attribute to any of the options!)    console.log(selectedValue);  }}

<select class="form-control" onchange="onChangeOption(this)">  <option selected="selected" value="1">1</option>  <option value="2">2</option></select>

value attribute on select tag not selecting default option

The only way to have a default option is to have selected in the option tag.

<SELECT>
<OPTION>Something
<OPTION SELECTED>Something Else

Selected attribute of select options is not updating automatically

The problem before was, that after selecting an option and reloading the page, the option was remembered during page reload, even though the attribute selected pointed to another option.

I solved it by calling the function below everytime. The function finds out which is the truly selected option, even after page reload.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select class="downloadSelect" id="select_179">    <option value="-">Please select</option>    <option value="link_2748" selected="selected">Deutsch</option>             <option value="link_2749">Chinese</option></select>
<button onclick="return showSelectedOption('select_179');">Show Option Text</button>
<script>function showSelectedOption(pSelectID){    var text;         $("#"+pSelectID)     .find("option")      .each(function(){      if ($(this).prop("selected")) {                  text = $(this).text();        }    });    console.log(text);}</script>

HTML: In a select, is it required that the value attribute of each option be unique?

The value of the option in the select list doesn’t affect the validity of the select element.

One thing that you need to keep in mind is that the id of an element must be unique for consistency in accessing that element properly. If duplicate ids exist for multiple elements the last instance of that id will be selected. You definitely need not worry about the duplication of values of the options in the select list.

This may even be required too, e.g. the following:

<select>
    <option value="fruit">mango</option>
    <option value="flower">rose</option>
    <option value="fruit">pineapple</option>
    <option value="flower">lotus</option>
    <option value="flower">lily</option>
</select>

Now if the user selects any of rose, lotus, or lily, the value of the select element will be flower, and in case either of mango and pineapple is selected, the value of the select element will be fruit. So it’s perfectly OK, and you may need this sometimes.

Text of option selected attribute in a drop down box

HTML:

<select id="country_code" name="country_code">
    <option value="" selected disabled>Country</option>
    <option value="AR">Argentina</option>
    <option value="BR">Brazil</option>
    <option value="CG">Congo</option>
    <option value="ZW">Zimbabwe</option>
</select>

PHP:

<?php
if(isset($_POST['formSubmit'])){ 



    $countrySelection = $_POST['country_code'];

    $countrycode_list = array('AF', 'AX', 'AL', 'DZ', 'AS', 'AD', 'AO', 
    'AI', 'AQ', 'AG', 'AR', 'AM', 'AW', 'AU', 'AT', 'AZ', 'BS', 'BH', 'BD', 
    'BB', 'BY', 'BE', 'BZ', 'BJ', 'BM', 'BT', 'BO', 'BQ', 'BA', 'BW', 'BV', 
    'BR', 'IO', 'BN', 'BG', 'BF', 'BI', 'KH', 'CM', 'CA', 'CV', 'KY', 'CF', 
    'TD', 'CL', 'CN', 'CX', 'CC', 'CO', 'KM', 'CG', 'CD', 'CK', 'CR', 'CI', 
    'HR', 'CU', 'CW', 'CY', 'CZ', 'DK', 'DJ', 'DM', 'DO', 'EC', 'EG', 'SV', 
    'GQ', 'ER', 'EE', 'ET', 'FK', 'FO', 'FJ', 'FI', 'FR', 'GF', 'PF', 'TF', 
    'GA', 'GM', 'GE', 'DE', 'GH', 'GI', 'GR', 'GL', 'GD', 'GP', 'GU', 'GT', 
    'GG', 'GN', 'GW', 'GY', 'HT', 'HM', 'VA', 'HN', 'HK', 'HU', 'IS', 'IN', 
    'ID', 'IR', 'IQ', 'IE', 'IM', 'IL', 'IT', 'JM', 'JP', 'JE', 'JO', 'KZ', 
    'KE', 'KI', 'KP', 'KR', 'KW', 'KG', 'LA', 'LV', 'LB', 'LS', 'LR', 'LY',
    'LI', 'LT', 'LU', 'MO', 'MK', 'MG', 'MW', 'MY', 'MV', 'ML', 'MT', 'MH',
    'MQ', 'MR', 'MU', 'YT', 'MX', 'FM', 'MD', 'MC', 'MN', 'ME', 'MS', 'MA', 
    'MZ', 'MM', 'NA', 'NR', 'NP', 'NL', 'NC', 'NZ', 'NI', 'NE', 'NG', 'NU', 
    'NF', 'MP', 'NO', 'OM', 'PK', 'PW', 'PS', 'PA', 'PG', 'PY', 'PE', 'PH', 
    'PN', 'PL', 'PT', 'PR', 'QA', 'RE', 'RO', 'RU', 'RW', 'BL', 'SH', 'KN', 
    'LC', 'MF', 'PM', 'VC', 'WS', 'SM', 'ST', 'SA', 'SN', 'RS', 'SC', 'SL', 
    'SG', 'SX', 'SK', 'SI', 'SB', 'SO', 'ZA', 'GS', 'SS', 'ES', 'LK', 'SD', 
    'SR', 'SJ', 'SZ', 'SE', 'CH', 'SY', 'TW', 'TJ', 'TZ', 'TH', 'TL', 'TG', 
    'TK', 'TO', 'TT', 'TN', 'TR', 'TM', 'TC', 'TV', 'UG', 'UA', 'AE', 'GB', 
    'US', 'UM', 'UY', 'UZ', 'VU', 'VE', 'VN', 'VG', 'VI', 'WF', 'EH', 'YE', 
    'ZM', 'ZW');

    $ISO3166 = NULL;
    //Loop all country codes
    foreach ($countrycode_list as $countrycode) {
        $locale_cc = Locale::getDisplayRegion('-' . $countrycode, 
        $countrySelection);

        if (strcasecmp($country_name, $locale_cc) == 0) {
            $ISO3166 = $countrycode;
            break;
        }
    }
//return NULL if not found or country code
return $ISO3166;
}

}
?>

What Values Can Appear in the "Selected" Attribute of the "Option" Tag