如何用javascript编写选择标签？答案

【问题标题】：how to write select tag with javascript?如何用javascript编写选择标签？
【发布时间】：2015-06-01 12:27:43
【问题描述】：

我有一个网站，我在其中使用 javascript 编写 html 代码，因为我想将所有内容加载到 javascript 代码中，这样用户就不会感到任何延迟。但我无法使用 javascript 实现“出生日期”部分。这是我的代码。

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;
}

在这种风格中，如果我必须为日期编写选择标签是可以的，但是选择标签多年，这对我来说会是一个负担吗？不是吗？如何在此实现“出生日期”风格？

【问题讨论】：

看看这个stackoverflow.com/questions/16410058/…
作为警告，如果您确实为此使用了 JavaScript，并且用户禁用了它，它将完全崩溃。如果它是您网站的必要组成部分，我建议使用服务器端语言插入 HTML，因为那么他们是否启用了 JS 并不重要。
我同意@RadonirinaMaminiaina 的观点，以至于我打算编辑你的问题，但无法解决......
1) 这是一个糟糕的主意。将您的 HTML 编写为 HTML，并使用 JavaScript 添加功能。 2）这在什么情况下不能按设计工作？你的实际问题是什么？

标签： javascript

【解决方案1】：

要回答您的问题，请尝试以下方式：

第一步：将源代码"<select id='dateOfBirth'>"+</select>"替换为"div id='dateOfBirth'>"+</div>"，因为需要三个选择框。

第二步：添加一些代码以或多或少地自动创建每个条目：

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'
  ...
}

【讨论】：