在不使用selectedindex的情况下选择Java脚本中的下拉列表

时间:2016-12-15 05:36:56

标签: javascript html

我正在尝试使用下面的javascript来选择月份值。我需要在不使用index的情况下获取下拉列表选项。因为月份值来自其他文件。请帮助我。 HTML:

<select name="param[start_month]">
<option label="Jan" value="1">Jan</option>
<option label="Feb" value="2">Feb</option>
<option label="Mar" value="3">Mar</option>
<option label="Apr" value="4">Apr</option>
<option label="May" value="5">May</option>
<option label="Jun" value="6">Jun</option>
<option label="Jul" value="7">Jul</option>
<option label="Aug" value="8">Aug</option>
<option label="Sep" value="9">Sep</option>
<option label="Oct" value="10">Oct</option>
<option label="Nov" value="11">Nov</option>
<option label="Dec" value="12" selected="selected">Dec</option>
</select>

使用Javascript:

document.getElementsByName("param[start_month]").value="Jan"

我也试过这个

document.getElementsByName("param[start_month]").label="Jan" 

1 个答案:

答案 0 :(得分:2)

使用attribute equals selector获取选项并设置所选属性。

document.querySelector("[name='param[start_month]'] option[label='Jan']").selected = true;
<select name="param[start_month]">
  <option label="Jan" value="1">Jan</option>
  <option label="Feb" value="2">Feb</option>
  <option label="Mar" value="3">Mar</option>
  <option label="Apr" value="4">Apr</option>
  <option label="May" value="5">May</option>
  <option label="Jun" value="6">Jun</option>
  <option label="Jul" value="7">Jul</option>
  <option label="Aug" value="8">Aug</option>
  <option label="Sep" value="9">Sep</option>
  <option label="Oct" value="10">Oct</option>
  <option label="Nov" value="11">Nov</option>
  <option label="Dec" value="12" selected="selected">Dec</option>
</select>

或者将值设置为指定属性的值。虽然getElementsByName返回元素集合,但您需要按索引获取元素。

document.getElementsByName("param[start_month]")[0].value = "1"
<select name="param[start_month]">
  <option label="Jan" value="1">Jan</option>
  <option label="Feb" value="2">Feb</option>
  <option label="Mar" value="3">Mar</option>
  <option label="Apr" value="4">Apr</option>
  <option label="May" value="5">May</option>
  <option label="Jun" value="6">Jun</option>
  <option label="Jul" value="7">Jul</option>
  <option label="Aug" value="8">Aug</option>
  <option label="Sep" value="9">Sep</option>
  <option label="Oct" value="10">Oct</option>
  <option label="Nov" value="11">Nov</option>
  <option label="Dec" value="12" selected="selected">Dec</option>
</select>