如何始终触发<select>标签的功能

时间:2017-09-29 03:28:54

标签: javascript selection default dropdown

我写了一个select标签(默认选中)并选择值来触发另一个js函数: &#13; &#13; var selectElement = document.getElementById(&#34; sel&#34;);&#13; &#13; function somefunction(){&#13;   的console.log(selectElement.value);&#13; };&#13; &lt; select id =&#34; sel&#34;平变化=&#39; somefunction()&#39;&GT;&#13;     &lt;选择选项=&#34;选择&#34;值=&#39;是&#39;&GT;是&LT; /选项&GT;&#13;     &lt; option value =&#39; no&#39;&gt; No&lt; / option&gt;&#13;     &lt; option value =&#39; all&#39;&gt; All&lt; / option&gt;&#13;  &LT; /选择&GT;&#13; &#13; &#13; 但是,如果我保留onchange事件,它只会在我更改选择时触发该函数。我还想在页面加载时使用我设置的默认选项触发该功能(在上例中为“是”)。 谢谢。

3 个答案:

答案 0 :(得分:0)

在你的身体标签上添加一个onload功能:

<body onLoad='somefunction()'>

答案 1 :(得分:0)

我建议建立一个独立的函数来计算所选索引。然后我会手动将变量映射到<select>元素,并附加一个onchange()处理程序而不是调用此函数,并将其作为参数传递。

使用此设置,您既可以计算任何<select>元素的选定值,也可以将目标<select>元素映射到变量以便于访问。然后,您可以在页面加载时将该变量简单地传递给函数:

/* Function to grab the selection, which takes a `<select>` element as a parameter */
function getSelectedIndexes(select) {
  for (var i = 0; i < select.options.length; i++) {
    if (select.options[i].selected) {
      return i;
    }
  }
}

var select = document.getElementsByTagName("select")[0];
select.onchange = function(e) {
  console.log(getSelectedIndexes(this)); // Selection on change
}

console.log(getSelectedIndexes(select)); // Default selection
<select>
  <option disabled selected> Select
  </option>
  <option selected="selected" value='yes'> Yes
  </option>
  <option value='no'> No
  </option>
  <option value='all'> All
  </option>
</select>

希望这有帮助! :)

答案 2 :(得分:0)

为什么在加载窗口时不调用该函数?我猜这会解决 你的问题。

&#13;
&#13;
window.onload = function() {
  if (selectEl.value) // or use (selectEl.value == "yes)
    somefunction()
};

var selectEl = document.getElementById("sel");

function somefunction() {
  console.log(selectEl.value);
}
&#13;
<select id="sel" onchange='somefunction()'>
    
 <option selected="selected" value='yes'>Yes</option>
  <option value='no'>No</option>
  <option value='all'>All</option>
    </select>
&#13;
&#13;
&#13;