一键填写多个输入字段
提问于 2012-09-29 13:40:14
这是我的问题..。我只需要一次点击就可以填充多个文本字段。需要点击的链接放在一个用php生成的td中，数据来自一个MySQL数据库(该死的JS初学者！)。
下面的代码只是我的问题的一个简短示例。
提前感谢
<script type='text/javascript'>
$(function(){
$('.click').live('click', function() {
$("#brand").val($(this).html());
$("#color").val('I need the color here');
$("#size").val('and here the size');
});
});
</script>
<label for="brand">Brand:</label><input autocomplete="off" id="brand" type="text" name="brand" />
<label for="color">Color:</label><input autocomplete="off" id="color" type="text" name="color" />
<label for="size">Size:</label>
<select id="size" name="size">
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<table>
<tr>
<th>brand</th>
<th>color</th>
<th>size</th>
</tr>
<tr>
<td><a href="#" class="click">nike</a></td>
<td>red</td>
<td>45</td>
</tr>
<tr>
<td colspan="3">...more rows here...</td>
</tr>
</table>
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-09-29 14:10:16
首先，我建议更改您的标记，以便为颜色和大小的表格单元格提供类，如下所示：
<tr>
<td><a href="#" class="click">nike</a></td>
<td class="color">red</td>
<td class="size">L</td>
</tr>此外，要更改dropdown的值，需要包括每个选项的值，如下所示：
<select id="size" name="size">
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>然后，在填充输入字段的javascript函数中，您可以将大小和颜色的值分配给变量。由于.click元素是表格单元格元素的子元素，而表格单元格元素又是大小和颜色单元格的同级元素，因此我们需要选择.click的父级元素，然后选择同级元素：
var color = $(this).parent().siblings('.color').text();
var size = $(this).parent().siblings('.size').text();
$("#color").val(color);
$("#size").val(size);这就完成了。然后，您只需使用相同的标记填充其余行，如下所示：
<tr>
<td><a href="#" class="click">adidas</a></td>
<td class="color">blue</td>
<td class="size">XL</td>
</tr>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12653178
复制
![[开发技巧]·HTML检测输入已完成自动填写下一个内容](https://ask.qcloudimg.com/http-save/yehe-2144603/kvzyq3dyhw.png)
腾讯云开发者
