JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<table>
<tr> 
    <td>Course:</td>
    <td>
        <select size="1" name="courses" >
        <option selected disabled>Select course</option>
        <option value="java_se">Java SE</option>
        <option value="java_ee">Java EE</option>
        <option value="testing">Testing</option>
        <option value="hand_made">Hand made</option>
        </select>
    </td>
</tr>
 
<tr> 
    <td>Other Courses:</td>
    <td>
        <select size="5" multiple name="next_courses">
        <option selected disabled>Select course</option>
        <option value="java_se">Java SE</option>
        <option value="java_ee">Java EE</option>
        <option value="testing">Testing</option>
        <option value="hand_made">Hand made</option>
             </select>
    </td>
</tr>    
</table>

JavaScript

document.querySelector('select[name="courses"]').onchange = function(){
    var select2 = document.querySelector('select[name="next_courses"]');
    for(var i = 1, length = select2.options.length; i < length; i++)
    	select2.options[i].removeAttribute('disabled');
    select2.querySelector('option[value="' + this.options[this.selectedIndex].value + '"]').disabled = 'disabled';
}