Javascript - Selecting options not working

Question

I have a form that can select option from dropdownlist when user entered a value.

For example: enter value 880520 would actually choose Year:1988 Month:May Day:20 .
The javascript function:

<script type="text/javascript">

function completeDOB() {

var x = document.getElementById('textvalue').value;

var str = x.match(/.{1,2}/g);

var day = parseInt(str[2],10) +1;
document.getElementById("dob-day").options[day].selected=true;

var month = parseInt(str[1],10) +1;
document.getElementById("dob-month").options[month].selected=true;

var year = parseInt(19+str[0],10);
document.getElementById("dob-year").options[year].selected=true;
}

</script>

I'm using onblur for the textfield to execute the completeDOB function.

<input name="textvalue" type="text" id="textvalue" onblur="completeDOB()">

However, the selected options only works on the Day and Month , but the Year don't work.

The dropdownlist code for Year :

<select name="dob_year" id="dob-year">
      <option value="">Year</option>
      <option value="">----</option>
      <?php
        $date = (int) date('Y');
        $numYears = 100;
        for ($i=$date; $i >= $date - $numYears; $i--) {
            echo "<option value=\"$i\">$i</option>";
        }
      ?>
</select>

Also, I've checked the source code of the page and the option value is fine.

<option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option><option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option><option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option><option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option>

And I really have no idea why only the Year list wont work but the other 2 works fine.

Updated:

I've tried entering select options manually and turns out the program recognize the option value as following :

<option value="03">2018</option>
<option value="04">2017</option>
<option value="05">2016</option>
etc.

How would I do to solve the problem? Does the option value must start from 01 ?

Answer 1

Your options is a HTMLOptionsCollection . You actually access options by their index there for day and month , instead by using their value.

Luckily for you, I bet your day and month selectElements have their 0th index defined, therefore the next ones indexes match with your day and month value.

However, this will not work for your year selectElement. You will need to select the correct option element based on its year value, and set its selected to be true .

Eg

function completeDOB() {
  var x = document.getElementById('textvalue').value;
  var str = x.match(/.{1,2}/g);

  var day = parseInt(str[2],10) +1;
  document.getElementById("dob-day").options[day].selected=true;

  var month = parseInt(str[1],10) +1;
  document.getElementById("dob-month").options[month].selected=true;

  var year = parseInt(19+str[0],10);
  var year_options = [].filter.call(document.getElementById('dob-year').options, function (opt) {
    return opt.value == year
  });
  if (year_options && year_options.length) {
    year_options[0].selected = true;
  }
}