Question

我希望能够在下拉列表中添加验证。如果用户要在第一个下拉列表中选择卡迪夫（select1）并在第二个下拉列表中选择（select2），则应该向用户发出提示消息，说明＆＃34;目的地不能与出发时间相同＆＃34 ;。

我知道这不是用户友好的，但需要完成= S

我在第二次下拉时遇到问题，因为它似乎不能用作双重AND if语句。

请使用jsfiddle.net来帮助我。

Departure: <br> 
<select id="select1"> 
    <option value="" disabled selected>Please Select</option>
    <option>Birmingham</option>
    <option>Bristol</option>
    <option>Cardiff</option>
    <option>Liverpool</option>
    <option>London</option>
    <option>Manchester</option>
</select>

<br><br>

Destination: <br>
<select id="select2">
    <option value="" disabled selected>Please Select</option>
    <option>Birmingham</option>
    <option>Bristol</option>
    <option>Cardiff</option>
    <option>Liverpool</option>
    <option>London</option>
    <option>Manchester</option>
</select>

<br><br>

<input type="Button" value="Order Tickets" onClick="myFunction()">

<script>
    function myFunction() 
    {
         if (document.getElementById("select1" && "select2").value == "Cardiff") 
            alert("Destination can't be same as Departure.");
         else
            alert("That's Fine");  
    }
</script>

Answer 1

您需要获取两个选择的值。

var one=document.getElementById("select1");
var two=document.getElementById("select2");

if (one.options[one.selectedIndex].value == two.options[two.selectedIndex].value)
    alert("Destination can't be same as Departure");

Answer 2

最好使用唯一名称作为选项值。

Departure: <br> 
<select id="select1"> 
<option value="" disabled selected>Please Select</option>
    <option value="1">Birmingham</option>
    <option value="2">Bristol</option>
    <option value="3">Cardiff</option>
    <option value="4">Liverpool</option>
    <option value="5">London</option>
    <option value="6">Manchester</option>
</select><br><br>

Destination: <br>
<select id="select2">
<option value="" disabled selected>Please Select</option>
    <option value="1">Birmingham</option>
    <option value="2">Bristol</option>
    <option value="3">Cardiff</option>
    <option value="4">Liverpool</option>
    <option value="5">London</option>
    <option value="6">Manchester</option>
</select><br><br>

    <input type="Button" value="Order Tickets" onClick="myFunction()">

<script>

function myFunction() {

 if (document.getElementById("select1").value == document.getElementById("select2").value) 
    alert("Destination can't be same as Departure.");

 else
     alert("That's Fine");  
}
</script>

Answer 3

function myFunction() {

 if (document.getElementById("select1").value === "Cardiff" && document.getElementById("select2").value === "Cardiff") 
    alert("Destination can't be same as Departure.");

 else
     alert("That's Fine");  
}

或更好：

function myFunction() {

 if (document.getElementById("select1").value === document.getElementById("select2").value) 
    alert("Destination can't be same as Departure.");

 else
     alert("That's Fine");  
}

Answer 4

替换

if (document.getElementById("select1" && "select2").value == "Cardiff")

与

if (document.getElementById("select1").value == document.getElementById("select1").value ) {
    ...
}

此外，如果您从目的地列表中删除了离开，那将会更好。但是你问题中的代码听起来对你现有的技能来说太过分了。

Answer 5

我已更新您的JavaScript。这是代码。

function myFunction() {
    var dest1 = document.getElementById("select1").value;
    var dest2 = document.getElementById("select2").value;
 if (dest1 === dest2) 
    alert("Destination can't be same as Departure.");
 else
    alert("That's Fine");  
}

Javascript HTML下拉验证

5 个答案: