javascript如何写选择标签？

Question

I have a website in which I am writing html code with javascript because I want to load everything into javascript code so that user won't feel any delay.But I am unable to implement "date of birth" part with javascript.Here is my code.

function getBasicProfileEditBody()
{
    var basicProfileEditBody = "<div>"+
                                    "<div>"+
                                        "<span>gender</span><span>:</span><span><input type='radio' name='gender' value='female' />female<input type='radio' name='gender' value='male' />male"+
                                    "</div>"+
                                    "<div>"+
                                        "<span>date of birth</span><span>:</span>"+
                                        "<span>"+
                                            "<select id='dateOfBirth'>"+

                                            +"</select>"+
                                        "</span>"+
                                    "</div>"+
                                    "<div>"+
                                        "<span>my strengths</span><span>:</span><span></span>"+
                                    "</div>"+
                                    "<div>"+
                                        "<span>my weaknesses</span><span>:</span><span></span>"+
                                    "</div>"+
                                    "<div>"+
                                        "<span>persons i like</span><span>:</span><span></span>"+
                                    "</div>"+                   
                                    "<div>"+
                                        "<span>things i like in others</span><span>:</span><span></span>"+
                                    "</div>"+
                                    "<div>"+
                                        "<span>things i don't like in others</span><span>:</span><span></span>"+
                                    "</div>"+
                                    "<div>"+
                                        "<span>my friends</span><span>:</span><span></span>"+
                                    "</div>"+
                                    "<div>"+
                                        "<span><input type='button' value='edit' id='aboutProfileEdit' /></span><span><input type='button' value='cancel' id='aboutProfileCancel' /></span>"+
                                    "</div>";
return basicProfileEditBody;
} 

In this style if I have to write select tag for dates it is ok but how about select tag for years,it would be a burden to me?wouldn't it be?How to implement "date of birth" in this style?

Answer 1

To answer your question, try following way:

First step: Replace the source code "<select id='dateOfBirth'>"+</select>" by "div id='dateOfBirth'>"+</div>" , because you need three select boxes.

Second step: Add some code to create each entries more or less automatically:

function getBasicProfileEditBody()
{
  ...

  var startBirthYearRange = 1970;
  var d = new Date();
  var endBirthYearRange = d.getFullYear();
  var yearEntries = endBirthYearRange - startbirthYear;
  var selectBoxYearOfBirth = "<select id='yearOfBirth'>";
  for (index = 0; index < yearEntries; index++)
  {
    selectBoxYearOfBirth += "<option>" + startBirthYearRange + index) + "</option>";
  }
  selectBoxYearOfBirth += "</select>";

  var birthMonth = new Array();
  birthMonth.push("1@January");
  birthMonth.push("2@February");
  birthMonth.push("3@March");
  ...
  birthMonth.push("12@December");
  var selectBoxMonthOfBirth = "<select id='monthOfBirth'>";
  for (index = 0; index < 12; index++)
  {
   var itemArry = birthMonth[index].split("@");
   selectBoxMonthOfBirth = += "<option value='" + itemArry[0] + "'>" +
                              itemArry[1] + "</option>";
  }
  selectBoxYearOfBirth += "</select>";

  var selectBoxDayOfBirth = = "<select id='dayOfBirth'>";
  for (index = 0; index < 31; index++)
  {
    selectBoxDayOfBirth = += "<option>" + (index + 1) + "</option>";
  )
  selectBoxDayOfBirth += "</select>";

  //Then apped the new three variables to var 'basicProfileEditBody'
  ...
}