输入值没有变化-Jquery

时间:2015-08-05 20:47:00

标签: javascript jquery

我有一个由两行组成的表:

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

当我提交表单时,它表示未选择语言。职位选择工作正常,但语言选择并不适用。我不知道为什么。我有任何建议请提供

1 个答案:

答案 0 :(得分:0)

验证您需要打开和关闭标签(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>