JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table cellpadding="2" cellspacing="0">
	<thead>
        <tr>
            <td width="144">First Name</td>
            <td width="144">Last Name</td>
            <td width="49">Opt-In</td>
            <td width="140">Program</td>
		</tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" name="fName" id="fName1" value="" /></td>
            <td><input type="text" name="lName" id="lName1" value="" /></td>
            <td><div align="center">
              <input type="checkbox" name="progIn" id="progIn1" value="" />
            </div></td>
            <td>
            	<select name="progName" id="progName1">
                	<option value="">Select an option</option>
                    <option value="reading">Reading</option>
                    <option value="riting">Riting</option>
                    <option value="rithmatic">Rithmatic</option>
                </select>
            </td>
		</tr>
        <tr>
            <td><input type="text" name="fName" id="fName2" value="" /></td>
            <td><input type="text" name="lName" id="lName2" value="" /></td>
            <td><div align="center">
              <input type="checkbox" name="progIn" id="progIn2" value="" />
            </div></td>
            <td>
            	<select name="progName" id="progName2">
                	<option value="">Select an option</option>
                    <option value="reading" selected>Reading</option>
                    <option value="riting">Riting</option>
                    <option value="rithmatic">Rithmatic</option>
                </select>
            </td>
		</tr>
        <tr>
            <td><input type="text" name="fName" id="fName3" value="" /></td>
            <td><input type="text" name="lName" id="lName3" value="" /></td>
            <td><div align="center">
              <input type="checkbox" name="progIn" id="progIn3" value="" />
            </div></td>
            <td>
            	<select name="progName" id="progName3">
          ...

JavaScript

$('input[name="progIn"]').change(function() {
	if (! $(this).is(':checked'))
	{
		// Get the correct SELECT
		var mySelect = $(this).parents('tr').find('select[name="progName"]');	
		// Set the selectedIndex to 0 (first one)
		mySelect.prop('selectedIndex',0);
	}
});