Question

如何在select元素的onchange处理程序中访问所选选项的值？

例如，我会在下面的代码中用this.value替换什么？

    <select id = "Div" name="Div" onchange="new SmartyAjax.update('div_update', 'Div/(this.value)', '','muwap=true','' );">
  <option value="0">Main Div</option>
  <option value="1">Extra Div 1</option>
  <option value="2">Extra Div 2</option>
  <option value="3">Extra Div 3</option>
  <option value="4">Extra Div 4</option>
  <option value="5">Extra Div 5</option>
  <option value="6">Extra Div 6</option>
  <option value="7">Extra Div 7</option>
  <option value="8">Extra Div 8</option>
  <option value="9">Extra Div 9</option>
  <option value="10">Extra Div 10</option>

非常感谢！

Answer 1

另一个答案比它需要的更复杂：

<select onchange="alert(this.options[this.selectedIndex].value);">
  <option value="0" selected>Main Div</option>
  <option value="1">Extra Div 1</option>
  <option value="2">Extra Div 2</option>
  <option value="3">Extra Div 3</option>
  <option value="4">Extra Div 4</option>
  <option value="5">Extra Div 5</option>
  <option value="6">Extra Div 6</option>
  <option value="7">Extra Div 7</option>
  <option value="8">Extra Div 8</option>
  <option value="9">Extra Div 9</option>
  <option value="10">Extra Div 10</option>
 </select>

在onchange处理程序中，this是select元素，因此this.options[this.selectedIndex]为您提供所选选项，.value访问value属性。

Answer 2

要获取所选选项的值，您需要首先获取 SELECT 元素的ID，如下所示：

var select = document.getElementById("Div");

然后你需要实际获得当前选择的 OPTION 的值，如下所示：

var currentValue = select.options[select.selectedIndex].value;

或者，如果您想要检索选项的文字而不是它的值，您可以执行以下操作：

var currentOptionText = select.options[select.selectedIndex].text;

因此，如果你想获得改变的价值，你需要创建一个包含上述代码的函数并运行该函数 ONCHANGE ，如下所示：

＆＃13;

function getOptValue() {
  var select = document.getElementById("Div");
  var optionValue = select.options[select.selectedIndex].value;
  
  //do whatever you'd like with the value here
  alert(optionValue); //with this alert we can check if the value is actually retrieved
 }

＆＃13;

<select id = "Div" name="Div" onchange="getOptValue();">
  <option value="0" selected>Main Div</option>
  <option value="1">Extra Div 1</option>
  <option value="2">Extra Div 2</option>
  <option value="3">Extra Div 3</option>
  <option value="4">Extra Div 4</option>
  <option value="5">Extra Div 5</option>
  <option value="6">Extra Div 6</option>
  <option value="7">Extra Div 7</option>
  <option value="8">Extra Div 8</option>
  <option value="9">Extra Div 9</option>
  <option value="10">Extra Div 10</option>
 </select>

＆＃13;

获得价值“onchange”

2 个答案: