访问值属性数据

Question

假设我选择第一个选项，我有以下表格。我想问的是有没有一种方法可以访问 value =0 并转换为数字而不是 A 如果表单提交了d

    <form  id="rpoerForm" action="http://localhost:5000/result" class="form"  method="post" >
        <div class="form__input-group">
           <label for="City">Select city</label>
   <select name="City" id="City" class="Input">
            <option value='0'>A</option>
            <option value='1'>B</option>
            <option value='2'>C</option>
            <option value='3'>D</option>
            <option value='4'>E</option>
            <option value='5'>F</option>
      </select>

Answer 1

试试这个，onsubmit 你将收到一个数组，其中包含表单内所有 inputs/select 的值，在一个元组内，形状为 ["name", value] :

rpoerForm.onsubmit = e => {
  e.preventDefault()
  const data = [...new FormData(e.target).entries()].map(entry => [entry[0], +entry[1]])
  console.log(data)
}

<form id="rpoerForm" action="http://localhost:5000/result" class="form" method="post">
  <div class="form__input-group">
    <label for="City">Select city</label>
    <select name="City" id="City" class="Input">
      <option value='0'>A</option>
      <option value='1'>B</option>
      <option value='2'>C</option>
      <option value='3'>D</option>
      <option value='4'>E</option>
      <option value='5'>F</option>
    </select>
    <button>Submit</button>
</form>

Answer 2

只需在 jquery

中完成即可

<form id="rpoerForm">
  <div class="form__input-group">
    <label for="City">Select city</label>
    <select name="City" id="City" class="Input">
      <option value='0'>A</option>
      <option value='1'>B</option>
      <option value='2'>C</option>
      <option value='3'>D</option>
      <option value='4'>E</option>
      <option value='5'>F</option>
    </select>
    <button id="submit">Submit</button>
</form>

$('#submit').on("click",function(){
  console.log($('#City option').val())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rpoerForm">
  <div class="form__input-group">
    <label for="City">Select city</label>
    <select name="City" id="City" class="Input">
      <option value='0'>A</option>
      <option value='1'>B</option>
      <option value='2'>C</option>
      <option value='3'>D</option>
      <option value='4'>E</option>
      <option value='5'>F</option>
    </select>
    <button id="submit">Submit</button>
</form>

访问值属性数据

access value attribute data

html

javascript

ajax