时间戳

首页 > 解决方案 > 如果在选择其他选项时选择了一个选项，则显示警报消息

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

问题描述

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

如果已选择任何端口（rate == "MAC"），则在其他端口中选择 MAX 时应显示警报消息
如果已选择任何端口（rate == "MAX"），则应显示警报消息在其他端口中选择 MAC 如果选择了 MAC，则您不能在任何其他选择框中选择 MAX，反之亦然。应显示警告消息

<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; 
        }
    })

});

});

标签： javascriptjquerynode.jsreactjsjquery-ui

解决方案

您可以.each循环遍历所有选择框并检查选项的文本是否相同，这取决于显示您的消息并重置该选择框。

演示代码：

$(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>

推荐阅读