輸入值不變-Jquery

Question

我有一個由兩行組成的表：

<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>

這是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());
                });
            });

當我提交表格時，它說未選擇語言。 位置選擇效果很好，但語言選擇卻不行。 我不知道為什么。 我有任何建議請提供

Answer 1

確認您需要打開和關閉（tr，th）的標簽，然后添加引號：

<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>