jquery's val() doesn't set 'selected' attribute

Question

I'm using jquery to create select options field in a table. but for unknown reason I'm not able to set the selected option.

In the example below, there are four select options and only the last one has the correct option selected. Can anybody tell me what is wrong with my code?

EDIT:
I changed to code snippet. Now we have 3 examples:
1) Original example that I posted. val() works only on second select option
2) Same as 1, but appending to DOM is done by ID not class. Here only the second select option is set correctly
3) select option is defined in HTML. val() is used to select option 2. Here it works ok.

Questions:
1) why in example 1, only the second select option is set correctly
2) why in exmpale 2, the first select option is not renderred at all.

I know that workaround is to select correct option by setting attribute "selected" on "option" element, but the behaviour of method val() in my opinion is not consistent and I wanted to understand why. maybe i'm using it not as designed, but so far cannot say so.

//example 1
$('<select />')
.append($('<option/>', { value: "1" }).text("first option"))
.append($('<option/>', { value: "2" }).text("second option"))
.append($('<option/>', { value: "3" }).text("third option"))
.val("2")
.appendTo($('.td1'));

//example 2
$('<select />')
.append($('<option/>', { value: "1" }).text("first option"))
.append($('<option/>', { value: "2" }).text("second option"))
.append($('<option/>', { value: "3" }).text("third option"))
.val("2")
.appendTo($('#td21'))
.appendTo($('#td22'));
//example 3
$('.td3 select').val("2");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th title="val() works only on last rendered element">Example 1</th>
      <th title="val() works, but only one element is rendered at all">Example 2</th>
      <th title="val() works OK!">Example 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="td1"></td>
      <td class="td2" id="td21"></td>
      <td class="td3">
        <select class="select3">
          <option value="1">first option</option>
          <option value="2">second option</option>
          <option value="3">third option</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="td1"></td>
      <td class="td2" id="td22"></td>
      <td class="td3">
        <select class="select3">
          <option value="1">first option</option>
          <option value="2">second option</option>
          <option value="3">third option</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

You can preselect an option by giving it the attribute selected like this :

.append($('<option/>', {
    value: "2",
    selected: true
})

$('<select />')
  .append($('<option/>', {
    value: "1"
  }).text("first option"))
  .append($('<option/>', {
    value: "2",
    selected: true
  }).text("second option"))
  .append($('<option/>', {
    value: "3"
  }).text("third option"))
  .appendTo($('.col2'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<TABLE>
  <TBODY>
    <TR DATA-INDEX='1'>
      <TD>11</TD>
      <TD class='col2'>12</TD>
      <TD>13</TD>
      <TD class='col4'>14</TD>
    </TR>
    <TR DATA-INDEX='2'>
      <TD>21</TD>
      <TD class='col2'>22</TD>
      <TD>23</TD>
      <TD class='col4'>24</TD>
    </TR>
    <TR DATA-INDEX='3'>
      <TD>31</TD>
      <TD class='col2'>32</TD>
      <TD>33</TD>
      <TD class='col4'>34</TD>
    </TR>
    <TR DATA-INDEX='4'>
      <TD>41</TD>
      <TD class='col2'>42</TD>
      <TD>43</TD>
      <TD class='col4'>44</TD>
    </TR>
  </TBODY>
</TABLE>

Or you can select your option after the fact like this :

.find('option[value="2"]').prop('selected',true‌​)

$('<select />')
      .append($('<option/>', {
        value: "1"
      }).text("first option"))
      .append($('<option/>', {
        value: "2"
      }).text("second option"))
      .append($('<option/>', {
        value: "3"
      }).text("third option"))
      .appendTo($('.col2'))
      .find('option[value="2"]').prop('selected',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<TABLE>
  <TBODY>
    <TR DATA-INDEX='1'>
      <TD>11</TD>
      <TD class='col2'>12</TD>
      <TD>13</TD>
      <TD class='col4'>14</TD>
    </TR>
    <TR DATA-INDEX='2'>
      <TD>21</TD>
      <TD class='col2'>22</TD>
      <TD>23</TD>
      <TD class='col4'>24</TD>
    </TR>
    <TR DATA-INDEX='3'>
      <TD>31</TD>
      <TD class='col2'>32</TD>
      <TD>33</TD>
      <TD class='col4'>34</TD>
    </TR>
    <TR DATA-INDEX='4'>
      <TD>41</TD>
      <TD class='col2'>42</TD>
      <TD>43</TD>
      <TD class='col4'>44</TD>
    </TR>
  </TBODY>
</TABLE>