Question

我想使用提交类型按钮来验证选择方法。我创建了一个表单，在此之下，我创建了select方法并提供了一些选项。根据提交类型，onClick应该使用select方法中的选项来验证我的提交类型。如何分配期权的价值到var t基于选择？

应根据选择选项my var t进行更改。

如果该值为Volvo，则应打印val11，类似地是Saab = val14，opel = val82，Audi = val34

<select name="carlist" class="temp>
  <option value="10">Volvo</option>
  <option value="20">Saab</option>
  <option value="30">Opel</option>
  <option value="45">Audi</option>
</select>

<input type="submit" class="temp" value="submit the answer">

<script>
   var t;
   if () {
     t=value;
   } else if () {
     t=value;
   } else if () {
     t=value;
   }else {
      t=value;
   }
</script>

Answer 1

单击按钮可以调用一个函数。在函数内部，获取所选选项的文本：

function getValue(){
  var el = document.querySelector('.temp');
  var val = el.options[el.selectedIndex].text;
  var t;
  if(val == "Volvo")
    t = 'val11';
  else if(val == "Saab")
    t = 'val14';
  if(val == "Opel")
    t = 'val82';
  else if(val == "Audi")
    t = 'val34';
  alert(t);
}

<form>
  <select name="carlist" class="temp">
    <option value="10">Volvo</option>
    <option value="20">Saab</option>
    <option value="30">Opel</option>
    <option value="45">Audi</option>
  </select>

  <input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>

您还可以考虑使用 data 属性，该属性更加简洁明了：

function getValue(){
  var el = document.querySelector('.temp');
  var t = el.options[el.selectedIndex].getAttribute('data-val');
  alert(t);
}

<form>
  <select name="carlist" class="temp">
    <option value="10" data-val="val11">Volvo</option>
    <option value="20" data-val="val14">Saab</option>
    <option value="30" data-val="val82">Opel</option>
    <option value="45" data-val="val34">Audi</option>
  </select>

  <input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>

Answer 2

您可以在id元素上设置select属性，然后通过querySelector或getElementById访问它。

<form id="carForm">
<select name="carlist" class="temp" id="car">
  <option value="val11">Volvo</option>
  <option value="val14">Saab</option>
  <option value="val82">Opel</option>
  <option value="val34">Audi</option>
</select>
</form>

let carForm = document.getElementById('carForm');

carForm.onsubmit = function(event) {
  var t = document.getElementById('car');
  ...
}

请参见codepen example

Answer 3

您可以做一些事情，这是我能摆脱的最简单的事情。

function submitForm() {
  const value = document.querySelector('[name="carlist"').value;
  console.log(value);
  return false; // to prevent it navigating away.
}

<form onsubmit="submitForm()">
<select name="carlist" class="temp">
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">Audi</option>
</select>

<input type="submit" class="temp" value="submit the answer">

您还可以提前运行一些验证，例如更改时：

/**
 * This function runs on form submit.
 */
function submitForm(event) {
  const value = document.querySelector('[name="carlist"').value;
  console.log(value);
  // to prevent it navigating away.
  event.preventDefault();
  return false; 
}

/**
 * This function runs on selection change
 */
function validateCar(changeEvent) {
  console.log('Change');
  // do something with changeEvent
}

<form onsubmit="submitForm(event)">
<select name="carlist" class="temp" onchange="validateCar(event)">
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">Audi</option>
</select>

<input type="submit" class="temp" value="submit the answer">

如何验证提交类型的选择方法？

3 个答案: