javascript 有没有办法使用javascript来填充带有值的html下拉菜单？

Is there a way to use javascript to populate a html dropdown menu with values?

提问by willkara

I need to have a drop-down menu that allows you to select a year from it (1900-2011). I am pretty sure that java-script has the functionality for that but I am totally lost on how to do it in code.

我需要有一个下拉菜单，允许您从中选择一年（1900-2011）。我很确定 java-script 具有该功能，但我完全不知道如何在代码中做到这一点。

I am using PHP.

我正在使用 PHP。

Wouldn't it be something along the lines of this?

它不会是这样的吗？

while(i<2012){
add i to dropdown list
increment i
}

This is the current code I have for the form:

这是我对表单的当前代码：

<form action="cite.php" method="post">
<h1>Newspaper</h1>

<script>

var select = document.getElementById("year");
for(var i = 2011; i >= 1900; --i) {
    var option = document.createElement('option');
    option.text = option.value = i;
    select.add(option, 0);
}


</script>

<table width="100%">
  <tr>
    <td><h3>Author Name</h3></td>
    <td><table width="100%" border="0">
      <tr>
        <td><label>
          <input type="text" name="lastName" id="lastName" />
        </label></td>
      </tr>
      <tr>
        <td><label>
          <input type="text" name="firstName" id="firstName" />
        </label></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><h3>Title of Article</h3></td>
    <td><label>
      <input type="text" name="artTit" id="artTit" />
    </label></td>
  </tr>
  <tr>
    <td><h3>Title of Newspaper</h3></td>
    <td><label>
      <input type="text" name="newsTit" id="newsTit" />
    </label></td>
  </tr>
  <tr>
    <td><h3>City</h3></td>
    <td><label>
      <input type="text" name="city" id="city" />
    </label></td>
  </tr>
  <tr>
    <td><h3>Date Published</h3></td>
    <td><table width="100%" border="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><select id="year" name="year"></select>
</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><h3>Edition</h3></td>
    <td><label>
      <input type="text" name="edi" id="edi" />
    </label></td>
  </tr>
  <tr>
    <td><h3>Page Designation</h3></td>
    <td><label>
      <input type="text" name="page" id="page" />
    </label></td>
  </tr>
  <tr>
    <td><h3>Medium</h3></td>
    <td><table width="200">
      <tr>
        <td><label>
          <input type="radio" name="RadioGroup1" value="print" id="RadioGroup1_0" />
          Print</label></td>
      </tr>
      <tr>
        <td><label>
          <input type="radio" name="RadioGroup1" value="web" id="RadioGroup1_1" />
          Web</label></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><label>
      <input type="text" name="med" id="med" />
    </label></td>
  </tr>
  <tr>
    <td><input type="hidden" name="hiddenField" id="hiddenField" /></td>
    <td><label>
      <input type="submit" name="Submit" id="Submit" value="Submit" />
    </label></td>
  </tr>
</table>


</form>

采纳答案by Jon

Assuming you have this element:

假设你有这个元素：

 <select id="year" name="year"></select>

You can use this code:

您可以使用此代码：

var select = document.getElementById("year");
for(var i = 2011; i >= 1900; --i) {
    var option = document.createElement('option');
    option.text = option.value = i;
    select.add(option, 0);
}

See it in action.

看到它在行动。

However:Why do you need to do this? Is it not possible to directly populate the drop down from the server side, which would be more natural?

但是：为什么需要这样做？是不是不能直接从服务器端填充下拉，这样会更自然？

Update:From PHP:

更新：来自 PHP：

<td>
    <select id="year" name="year">
    <?php for($i = 2011; $i >= 1900; --$i) 
              printf('<option value="%d">%d</option>', $i, $i);
    ?>
    </select> 
</td> 

回答by David says reinstate Monica

var sel = document.getElementById('selectElementID');
var startAt = 1900;
var endAt = 2012;

for (i=0; i<=endAt; i++){
    var opt = document.createElement('li');
        opt.value = startAt + i;
        opt.innerHTML = startAt + i;
    sel.appendChild(opt)
}

JS Fiddle demo.

JS小提琴演示。

Or, if you'd prefer to use while:

或者，如果您更喜欢使用while：

var sel = document.getElementById('selectElementID');
var startAt = 1900;
var endAt = 2012;
var i = 0;

while (i<=endAt){
    var opt = document.createElement('option');
        opt.value = startAt + i;
        opt.innerHTML = startAt + i;
    sel.appendChild(opt)
        i++;
}

JS Fiddle demo.

JS小提琴演示。

回答by Jeffrey Sweeney

You can use document.createElement("option") and appendChild to add nodes to a select dropdown.

您可以使用 document.createElement("option") 和 appendChild 将节点添加到选择下拉列表中。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

        <select id="select">

        </select>

        <script type="text/Javascript">

            var menu = document.getElementById("select");
            for(var i = 0; i < 20; i++) {
                var newOption = document.createElement("option");
                newOption.innerHTML = i;
                menu.appendChild(newOption);
            }

            </script>
    </body>
</html>