Question

我的目标：是选择值通过我的函数更新字段运行它与函数的输出值。

问题：当我从列表中选择值时，它不会触发该函数而不更新该字段。

感谢您的帮助。

HTML

<form id="someform">
<select id="sample" onChange="dIIN()">
<option>12</option>
<option>14</option>
<option>16</option>
<option>18</option>
<option>20</option>
<option>22</option>
<option>24</option>
<option>27</option>
<option>30</option>
<option>32</option>
</select> 
</form>

<tr>
<td>Quantity to be dredged</td>
<td><input type="number" value="450000" class="" id="quantity-dredged" ></input></td>
</tr>

的JavaScript

var dIIN = function() {
  var dredgeSize = document.getElementById('sample');
  var foo = 0;
  if (dredgeSize <= 12) {
    foo = 36;
  } else if (dredgeSize <= 14) {
    foo = 42;
  } else if (dredgeSize <= 16) {
    foo = 44;
  } else if (dredgeSize <= 18) {
    foo = 48;
  } else if (dredgeSize <= 20) {
    foo = 60;
  } else if (dredgeSize <= 22) {
    foo = 62;
  } else if (dredgeSize <= 24) {
    foo = 62;
  } else if (dredgeSize <= 26) {
    foo = 68;
  } else if (dredgeSize <= 28) {
    foo = 68;
  } else if (dredgeSize <= 30) {
    foo = 74;
  }
  document.getElementById('quantity-dredged').value = foo;
};

这是一个 codePen example

Answer 1

更改行：

var dredgeSize = document.getElementById('sample');

为：

var dredgeSize = document.getElementById('sample').value;

<强> Demo

Answer 2

您可以使用事件侦听器来保持代码清洁。

＆＃13;

var dIIN = function(dredgeSize) {
  var foo = 0;
  if (dredgeSize <= 12) {
    foo = 36;
  } else if (dredgeSize <= 14) {
    foo = 42;
  } else if (dredgeSize <= 16) {
    foo = 44;
  } else if (dredgeSize <= 18) {
    foo = 48;
  } else if (dredgeSize <= 20) {
    foo = 60;
  } else if (dredgeSize <= 22) {
    foo = 62;
  } else if (dredgeSize <= 24) {
    foo = 62;
  } else if (dredgeSize <= 26) {
    foo = 68;
  } else if (dredgeSize <= 28) {
    foo = 68;
  } else if (dredgeSize <= 30) {
    foo = 74;
  }
  document.getElementById('quantity-dredged').value = foo;
};
   var select = document.querySelector('#sample');
    select.addEventListener('change', function(){
      dIIN(this.value);
    });

＆＃13;

<form id="someform">
<select id="sample">
<option>12</option>
<option>14</option>
<option>16</option>
<option>18</option>
<option>20</option>
<option>22</option>
<option>24</option>
<option>27</option>
<option>30</option>
<option>32</option>
</select> 
</form>

<tr>
								<td>Quantity to be dredged</td>
								<td><input type="number" value="450000" class="" id="quantity-dredged" ></input></td>
</tr>

＆＃13;

Answer 3

HTML：

<form id="someform">
<select id="sample" onchange="dIIN(this)">
<option>12</option>
<option>14</option>
<option>16</option>
<option>18</option>
<option>20</option>
<option>22</option>
<option>24</option>
<option>27</option>
<option>30</option>
<option>32</option>
</select> 
</form>

<tr>
                                <td>Quantity to be dredged</td>
                                <td><input type="number" value="450000" class="" id="quantity-dredged" ></input></td>
</tr>

JAVASCRIPT：

var dIIN = function(_this) {

  var dredgeSize = _this.options[_this.selectedIndex].text;
  var foo = 0;
  if (dredgeSize <= 12) {
    foo = 36;
  } else if (dredgeSize <= 14) {
    foo = 42;
  } else if (dredgeSize <= 16) {
    foo = 44;
  } else if (dredgeSize <= 18) {
    foo = 48;
  } else if (dredgeSize <= 20) {
    foo = 60;
  } else if (dredgeSize <= 22) {
    foo = 62;
  } else if (dredgeSize <= 24) {
    foo = 62;
  } else if (dredgeSize <= 26) {
    foo = 68;
  } else if (dredgeSize <= 28) {
    foo = 68;
  } else if (dredgeSize <= 30) {
    foo = 74;
  }
  document.getElementById('quantity-dredged').value = foo;
};

取值，用输出更新字段

3 个答案: