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

displaying an alert message when selecting an option 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; 
        }
    })

});

});

CodePudding user response：

You can .each loop to iterate through all select-boxes and check if the text of option is same or not depending on this show your message and reset that select-box.

Demo Code :

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