javascript - 如何停止使用jsp或php为两个标签选择重复选项？

Question

<label for="FROM">FROM:</label>
<select name="FROM">
  <option selected="" value="Default">(Please select a country)</option>
  <option value="CH">CHENNAI</option>
  <option value="KP">KANCHIPURAM</option>
  <option value="VE">VELLORE</option>
  <option value="BA">BANGALORE</option>
</select>
<BR></BR>

<label for="TO">TO:</label>
<select name="TO">
  <option selected="" value="Default">(Please select a country)</option>
  <option value="CH">CHENNAI</option>
  <option value="KP">KANCHIPURAM</option>
  <option value="VE">VELLORE</option>
  <option value="BA">BANGALORE</option>
</select><br></form>
</br>

我正在做在线巴士预订项目，我使用选项标签设置了两个目的地标签，'“从”区域和“到”区域'，现在我不应该是相同的区域，我需要jsp或php查询

Answer 1

将 ID 添加到两个选择中，以便我们可以识别并找到它们。然后将事件监听器添加到您的第一个选择中，对其进行的更改将隐藏所选值并隐藏所有其他值。

这使用选项的值，而不是其文本。

$("#from-location").on("change", function() {
  $("#to-location").find("option").show();
  $("#to-location").find("option[value="+this.value+"]").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="FROM">FROM:</label>
<select name="FROM" id="from-location">
  <option selected="" value="Default">(Please select a country)</option>
  <option value="CH">CHENNAI</option>
  <option value="KP">KANCHIPURAM</option>
  <option value="VE">VELLORE</option>
  <option value="BA">BANGALORE</option>
</select>
<BR></BR>

<label for="TO">TO:</label>
<select name="TO" id="to-location">
  <option selected="" value="Default">(Please select a country)</option>
  <option value="CH">CHENNAI</option>
  <option value="KP">KANCHIPURAM</option>
  <option value="VE">VELLORE</option>
  <option value="BA">BANGALORE</option>
</select><br></form>
</br>

您可能还想在提交表单后添加一些服务器端验证，在其中检查

if ($_POST['FROM'] === $_POST['TO']) { 
    /* Error handling */ 
}