You can just get a reference to both <select> using document.getElemebtById, document.querySelector(...) or any other document.getElement...() function and, once the first one changes, assign its value to the second one:

const state1 = document.getElementById('state1');
const state2 = document.getElementById('state2');

state1.onchange = function(e) {
    state2.value = e.target.value;
};

Also, there are multiple issues with your code:

• A <form> is not allowed inside a <table>, so you either wrap the whole table with it or put it in a single cell. Inside a <table> element you can only use <caption>, <colgroup>, <thead>, <tfoot>, <tbody> and <tr>.

• Unquoted HTML attributes are also valid but, if they contain untrusted data, it will be more difficult to escape them to avoid XSS attacks. Actually, most HTML escaping tools will assume the usage of quotes. Anyway, you should also be consistent with that, so either use double, single or no quotes at all.

• You should use lowercase for your HTML code. While browsers will still understand uppercase, it is a convention to use lowercase due to its better readability. This comes from the old xHTML which required lowercase.

• You should also avoid using event attributes in order to keep your presentation and your logic separated and also due to the way the scope for inline elements is resolved.

  There's a good explanation on that in this other answer: onclick="" vs event handler

• You should not use HTML attributes to style your elements. That's CSS concern.

  Actually, bgcolor, text, link... Are all unsupported in HTML5.

• Lastly, if you are using the <table> element just for layout, without any semantic meaning, then you should use other elements instead, maybe <ul> and <li> or just <div>, and position them using CSS.

  Maybe Flexbox can come in handy, although position, float and display should be more than enough for your use case.

All together, it should look like this:

const state1 = document.getElementById('state1');
const state2 = document.getElementById('state2');

state1.onchange = function(e) {
  state2.value = e.target.value;
};

body {
  font-family: sans-serif;
}

table {
  background: #FFF;
  color: #000;
  width: 400px;
  border: none;
  border-collapse: collapse;
}

td {
  padding: .25rem;
}

select {
  width: 100%;
}

.legend {
  width: 50px;
  text-align: right;
  text-transform: uppercase;
  font-size: .75rem;
}

.button {
  width: 100%;
  border: none;
  background: #FFF;
  padding: .5rem;
  border-radius: 2px;
  color: #000;
  text-transform: uppercase;
  font-size: .75rem;
  margin: 1rem 0 0;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
  transition: box-shadow ease-in .125s;
}

.button:hover {
  box-shadow: 0 0 .5rem rgba(0, 0, 0, .25);
}

<form
  name="form"
  method="post"
  action="http://www.plus2net.com">

  <table>
    <tr>
      <td class="legend">State</td>
      <td>
        <select name="state" id="state1">
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
          <option value="Four">Four</option>
        </select>
      </td>
    </tr>
    
    <tr>
      <td class="legend">State</td>
      <td>
        <select name="state2" id="state2">
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
        <option value="Four">Four</option>
        </select>
     </td>
   </tr>
   
    <tr>
      <td colspan="2">
        <input type="submit" value="submit" class="button">
      </td>
    </tr>
  </table>
  
</form>