我有一个由两行组成的表:
<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());
});
});
当我提交表单时,它表示未选择语言。职位选择工作正常,但语言选择并不适用。我不知道为什么。我有任何建议请提供
答案 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>