将特定的表格单元格值设置为文本框（jQuery / PHP）

I have 1 table with 2 columns. We'll call it col Number and col Letter. It appears as such:

1  |  A
2  |  B
3  |  C
4  |  D

I have 1 select2 drop down box that has a loop of all the Numbers - and a text box I would like to have the Letter appear that correlates with that number.

HTML/PHP querying current table

<label for="number">NUMBER</label>
<select onChange="setLetter(this)" style="text-transform: uppercase;" class="form-control select2" style="width: 100%;" name="number" id="number">
    <option selected="selected" disabled="disabled">-Select-</option>

    <?php
    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            echo "<option name='".$row["Number"]."' value='".$row["Number"]."'>";
            echo $row["number"];
            echo "</option>";
        }
    } else {
        echo "0 results";
    }
    $conn->close();
    ?>
</select>
</div>

JavaScript attempt at querying the value of the select2 box

function setLetter(sel)
{
    var col = sel.value;
    <?php
    $number = "SELECT ['Letter'] FROM `msftrail` WHERE ['Number']= '".$col."'";
    ?>
    var php_var = "<?php echo $number; ?>";
    $("#letter").val(php_var);
}

How can I populate the Letter text box with the cell in the table that correlates with the correct number?

The easiest here would be to put all those rows in an array, and serializing it as JSON. Then you can load it up on the client.

HTML+PHP:

$msftrail = array();
while($row = $result->fetch_assoc()) {
    echo "<option name='".$row["Number"]."' value='".$row["Number"]."'>";
    echo $row["number"];
    echo "</option>";
    $msftrail[$row['Number']] = $row['Letter']; // Store the mapping from Number to Letter in this array
}

JavaScript+PHP:

var msftrail = <?php echo json_encode($msftrail); /* Send the array to the client as JSON */ ?>;
function setLetter(sel)
{
    var col = sel.value;
    var php_var = msftrail[col]; // Look up the letter for that number in the array
    $("#letter").val(php_var);
}

You could create an Array with all your characters and then call the corresponding character by index.

Like this:

$foo = array(
             '1' => 'A',
             '2' => 'B',
             '3' => 'C'
);

Then you can just get your character by calling your array with the index.

Like this:

echo $foo['1'];

function setLetter(sel){
    var tableValue=sel.value
    
    $('.item tr').each(function() {
    var td1 = $(this).find("td").eq(0).html();  
    var td2 = $(this).find("td").eq(1).html();  
    if(tableValue==td1){
   
    $('#out').text(td2);
    }
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="item">
    <tr>
        <td>1</td>
        
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
    </tr>
    <tr>
        <td>3</td>
        <td>C</td>
    </tr>
    <tr>
        <td>4</td>
        <td>D</td>
    </tr>

</table>
<form>
    <select onChange="setLetter(this)">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <br>
    <textarea id="out"></textarea>
</form>

</div>