输入值不变-Jquery

Question

I have a table which consists from two rows:

<table class="settings-edit-table">
   <tbody>
      <th scope="row"> Position</th>
      <tr>
         <td>
            <div class="editable-select-holder editable-select-expanded">
               <input type="text" name="position" id="position" value="Administrator-assistant"/>
               <button type="button" class="editable-select-expander"></button>
               <ul class="editable-select-options">
                  <li>Administrator-assistant</li>
                  <li>Chief Accountant</li>
                  <li>Chief Exeϲutive Officer</li>
                  <li>Chief Financial Officer</li>
               </ul>
            </div>
         </td>
      </tr>
      <th scope="row">Language </th>
      <td>
         <div class="editable-select-holder editable-select-expanded">
            <input type="text" name="language" id="preferredLanguage">
            <button type="button" class="editable-select-expander"></button>
            <ul class="editable-select-options">
               <li id="en">English </li>
               <li id="et">Estonian </li>
            </ul>
         </div>
      </td>
      </tr>
   </tbody>
</table>

Here is Javascript:

$(document).on('click','.editable-select-expander', function() {
                 var $holder = $(this).parent();
                $holder.toggleClass('editable-select-expanded');
                $holder.on('click', 'li', function() {
                    var $t = $(this);

                    $holder.removeClass('editable-select-expanded');
                    $holder.find('input').val($t.text());
                });
            });

When I submit the form it says that language is not selected. Position selection works fine but language selection doesn't. I have no idea why. I you have any suggestions please provide

Answer 1

Verify your tags you need open and close(tr,th) look add quotes:

<table class="settings-edit-table">
   <tbody>
      <th scope="row"> Position</th>
      <tr>
         <td>
            <div class="editable-select-holder editable-select-expanded">
               <input type="text" name="position" id="position" value="Administrator-assistant"/>
               <button type="button" class="editable-select-expander"></button>
               <ul class="editable-select-options">
                  <li>Administrator-assistant</li>
                  <li>Chief Accountant</li>
                  <li>Chief Exeϲutive Officer</li>
                  <li>Chief Financial Officer</li>
               </ul>
            </div>
         </td>
      </tr>
      </th> <!-- add -->
      <th scope="row">Language </th>
      <tr> <!-- add -->
         <td>
            <div class="editable-select-holder editable-select-expanded">
               <input type="text" name="language" id="preferredLanguage">
               <button type="button" class="editable-select-expander"></button>
               <ul class="editable-select-options">
                  <li id="en">English </li>
                  <li id="et">Estonian </li>
               </ul>
            </div>
         </td>
      </tr>
      </th> <!-- add -->
   </tbody>
</table>