访问值属性数据

Question

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

<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你将收到一个数组，其中包含表单中所有输入/选择的值在一个形状为["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>