如何根据下拉列表中选择的选项设置值

Question

我有一个不同纪律方法的下拉列表。我想为每种纪律方法分配一个值（分）。出于这个原因，我想使用分配的值从员工的总体评分/分数中减去。下面是下拉的代码

<div class="form-group">
     <label class="control-label">Disciplinary Action</label>
      <select id="dis_value" onchange="setValue()" class="form-control custom-select" data-placeholder="Choose a Category" tabindex="1" name="warning" value="">
         <option value="Verbal Warning">Verbal Warning</option>
         <option value="Writing Warning">Written Warning</option>
         <option value="Demotion">Demotion</option>
         <option value="Suspension">Suspension</option>
      </select>
</div>

我知道我可以在“值”字段中设置值，但我已经使用了这些值，因此我不想更改它。我有办法实现这个目标吗？下面是我尝试过的脚本。没有结果

var dis_value;
function setValue(){
  value = document.getElementById('dis_value').value;
  if (value == Verbal Warning) {
  var vw = 10;
  alert(vw);
 }
}

Answer 1

如果您正在谈论要在 JS 中执行客户端的操作，您可以在每个选项上使用数据属性来携带与该选项相关的附加信息。

function setValue(){
  let value = document.querySelector('#dis_value').value;
  let optionSelected = document.querySelector("#dis_value option:checked");
  let points = optionSelected.dataset.points;
  
  alert (points + " for a " + value);
}

<div class="form-group">
     <label class="control-label">Disciplinary Action</label>
      <select id="dis_value" onchange="setValue()" class="form-control custom-select" data-placeholder="Choose a Category" tabindex="1" name="warning" value="">
         <option data-points="1" value="Verbal Warning">Verbal Warning</option>
         <option data-points="2" value="Writing Warning">Written Warning</option>
         <option data-points="3" value="Demotion">Demotion</option>
         <option data-points="4" value="Suspension">Suspension</option>
      </select>
</div>

背景阅读：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes