JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<form>
    
    <select name="option" id="select1" size="1" required >
      <option value="" selected="selected" disabled hidden>Options</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>               
    </select>
    
    <select name="option" id="select2" size="1" required >
      <option value="" selected="selected" disabled hidden>Options</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>               
    </select>
    
    <select name="option" id="select3" size="1" required >
      <option value="" selected="selected" disabled hidden>Options</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>               
    </select>
    <a href="htmo"> 345345</a>
    <input align="middle" id="button" type="button" value="Reset Form">
    
    </form>

JavaScript

var $selects = $('select');
        $selects.on('change', function() {
        $("option", $selects).prop("disabled", false);
        $selects.each(function() {
        var $select = $(this),
          $options = $selects.not($select).find('option'),
          selectedText = $select.children('option:selected').text();
        $options.each(function() {
          if ($(this).text() == selectedText) $(this).prop("disabled",
            true);
        });
        });
        });
        $selects.eq(0).trigger('change');  
  
  
  
  $("#button").on("click", function(){
    $('#select1 option').prop('selected', function(){
      return this.defaultSelected;
    });
     $('#select2 option').prop('selected', function(){
      return this.defaultSelected;
    });
     $('#select3 option').prop('selected', function(){
      return this.defaultSelected;
    });
  });