有沒有辦法用相同的選項來驗證html中的2 select標簽？ 使用JavaScript

Question

我正在嘗試建立一個網站，在這里我有兩個選擇標簽，並且兩個標簽都具有相同的選項（來源和目標），因此兩個選擇標簽不能具有相同的提交選項。 我的問題是如何驗證用戶是否發送相同的價值期權？

我嘗試做一些代碼來驗證它，但是由於我是javascript新手，所以我不知道該怎么辦。 先感謝您！

 console.clear() function submitForm() { var origin = document.getElementById("origin").value; var destination = document.getElementById("destination").value; if (origin == destination) { alert("origin and destination can't be the same"); } } 

 <form action=""> <select name="origin" id="origin"> <option value="manila">manila</option> <option value="QC">QC</option> <option value="makati">Makati</option> <option value="marikina">marikina</option> </select> <select name="destination" id="destination"> <option value="manila">manila</option> <option value="QC">QC</option> <option value="makati">Makati</option> <option value="marikina">marikina</option> </select> <input type="submit" value="submit" onsubmit="submitForm()"> </form> 

我的預期輸出是應該有一條警告消息，其中select（origin）和select（destination）不能具有相同的值，因此用戶無法提交表單。

Answer 1

盡管還有許多其他方法可以實現這一目標，但實際上這應該可行。 您錯過的微小細節：

onsubmit屬於<form>而不屬於<input> ！

<form action="" onsubmit="submitForm()">

Answer 2

將onsubmit移至以下表單：

 console.clear() function submitForm(e) { var origin = e.target.querySelector("[name=origin]").value; var destination = e.target.querySelector("[name=destination]").value; if (origin == destination) { e.stopPropagation() e.preventDefault() alert("origin and destination can't be the same"); return false; } } 

 <form action="#" onsubmit="submitForm(event)"> <select name="origin"> <option value="manila">manila</option> <option value="QC">QC</option> <option value="makati">Makati</option> <option value="marikina">marikina</option> </select> <select name="destination"> <option value="manila">manila</option> <option value="QC">QC</option> <option value="makati">Makati</option> <option value="marikina">marikina</option> </select> <input type="submit" value="submit"> </form> 

或者更好，使用addEventListener

 console.clear() function submitForm(e) { var origin = e.target.querySelector("[name=origin]").value; var destination = e.target.querySelector("[name=destination]").value; if (origin == destination) { e.stopPropagation() e.preventDefault() alert("origin and destination can't be the same"); return false; } } document.getElementById('flight').addEventListener('submit', submitForm) 

 <form action="#" id="flight"> <select name="origin"> <option value="manila">manila</option> <option value="QC">QC</option> <option value="makati">Makati</option> <option value="marikina">marikina</option> </select> <select name="destination"> <option value="manila">manila</option> <option value="QC">QC</option> <option value="makati">Makati</option> <option value="marikina">marikina</option> </select> <input type="submit" value="submit"> </form> 

Answer 3

那么，在這種情況下，您無需提交表單即可對其進行驗證：

 <script>
    function validateForm(){
        var origin = document.getElementById("origin");
        var destination = document.getElementById("destination");
        if(origin.value == destination.value){
            alert("origin and destination can't be the same");
        }
    }
</script>

<form action="">
        <select name="origin" id="origin">
            <option value="manila">manila</option>
            <option value="QC">QC</option>
            <option value="makati">Makati</option>
            <option value="marikina">marikina</option>
        </select>
        <select name="destination" id="destination">
            <option value="manila">manila</option>
            <option value="QC">QC</option>
            <option value="makati">Makati</option>
            <option value="marikina">marikina</option>
        </select>
        <input type="button" value="Validate" onclick="validateForm()">
    </form>