如果在选择其他选项时选择了一个选项，则显示警告消息

Question

选择选项时显示警告消息jQuery

if any of the ports has selected(rate == "MAC"), an alert message should be displayed when selecting MAX in other ports
if any of the ports has selected(rate == "MAX") an alert message should be displayed when selecting MAC in other ports If MAC is selected then you cannot select MAX in any of the other select boxes and vice versa. An alert message should be displayed

<table>
    <thead>
    <tr>
      <th>Port</th>
      <th>Rate</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td class="port">1</td>
      <td>
        <select class= rate>
          <option value=""></option>
          <option value="1">MAC</option>
          <option value="2">MAX</option>
          <option value="3">MIN</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="port">2</td>
      <td>
        <select class= rate>
          <option value=""></option>
          <option value="1">MAC</option>
          <option value="2">MAX</option>
          <option value="3">MIN</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="port">3</td>
      <td>
        <select class= rate>
          <option value=""></option>
          <option value="1">MAC</option>
          <option value="2">MAX</option>
          <option value="3">MIN</option>
        </select>
      </td>
    </tr>
    </tbody>
    </table>

$(document).ready(function() {
$("select.rate").change(function() {
    var rate = $(this).find("option:selected").text();
    var this_ = $(this)
    $("select.rate").not(this).each(function() {
        var values = $(this).find("option:selected").text();
        if (rate == 'MAC' && values == 'MAX') {
            alert("Since you have selected MAC, you can't select MAX");
            this_.val("") 
            return false; 
        }
    })

});

});

Answer 1

您可以 .each 循环遍历所有 select-box 并检查选项的文本是否相同，具体取决于此显示您的消息并重置 select-盒子.

演示代码 :

$(document).ready(function() {
  $("select.rate").change(function() {
    var rate = $(this).find("option:selected").text(); //get option text
    var this_ = $(this)
    //loop through other slects but not the one where change has occur
    $("select.rate").not(this).each(function() {
      var values = $(this).find("option:selected").text();
      //compare... 
      if (rate == 'MAC' && values == 'MAX') {
        alert("Since you have selected MAX, you can't select MAC");
        this_.val("") //reset
        return false; //break through loop
      }
      if (rate == 'MAX' && values == 'MAC') {
        alert("Since you have selected MAC, you can't select MAX")
        this_.val("")
        return false;

      }
    })

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Port</th>
      <th>Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="port">1</td>
      <td>
        <select class="rate">
          <option value=""></option>
          <option value="1">MAC</option>
          <option value="2">MAX</option>
          <option value="3">MIN</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="port">2</td>
      <td>
        <select class="rate">
          <option value=""></option>
          <option value="1">MAC</option>
          <option value="2">MAX</option>
          <option value="3">MIN</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="port">3</td>
      <td>
        <select class="rate">
          <option value=""></option>
          <option value="1">MAC</option>
          <option value="2">MAX</option>
          <option value="3">MIN</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

如果在选择其他选项时选择了一个选项，则显示警告消息

display an alert message if an option is selected while selecting other option

javascript

jquery

jquery-ui

node.js

reactjs