<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Pomodoro Clock</title>
</head>
<body>
<main>
<h1>Pomodoro clock</h1>
<div class="grid">
<div class="box food">Set the timer for
<form method="get" id="settime">
<select name="pasta">
<option id="1">Pappardelle</option>
<option id="2">Penne</option>
<option id="3">Farfalle</option>
<option id="4">Bucatini</option>
<option id="5">Angel Hair</option>
<option id="6">Gnocchi</option>
<option id="7">Orecchiette</option>
</select>
</form>
</div>
<div class="box clock"><span id="start">Start</span></div>
<div class="box settimer">
<div class="decrement icon"><i class="fas fa-caret-left"></i></div>
<div id="mins"><span id="defalut">Ready</span></div>
<div class="increment icon"><i class="fas fa-caret-right"></i></div>
</div>
<div class="box pause">Pause</div>
</div>
</main>
</body>
</html>
我试图在选择时从选择 div中获取数据，然后将其存储并相应地更新 mins div，现在它具有默认文本“Ready”。
我想让表单在没有提交按钮的情况下自动触发事件;明白我可以使用<select onchange="this.form.submit()">，但无法弄清楚如何使用jquery。