PHP 从“选择 - 数组”字段中填充文本框
PHP Populate Text box from Select - Array fields
我需要用"选择"下拉列表的结果填充相关文本框。
到目前为止,我的Javascript是
<script language="JavaScript">
var mytextbox = document.getElementById('error');
var mydropdown = document.getElementById('errormsg_id');
mydropdown.onchange = function(){
mytextbox.value = this.value;
}
</script>
我的选择框和文本框是从查询构建为数组的,因此它们的数量很少。我需要能够使用旁边的"选择"中的结果填充相应的文本框。
有什么想法吗?
谢谢
<td width="1%">
<select style="width:100%" name="errormsg_id[]" id="errormsg_id[]">
<?php do { ?>
<option value="<?php echo $row_rserrormsg['errormsg_id']?>"
<?php if ($row_rsdates['errormsg_id'] == $row_rserrormsg['errormsg_id']) { echo("selected='selected'"); } ; ?> >
<?php echo $row_rserrormsg['error_message']?></option>
<?php } while ($row_rserrormsg = mysql_fetch_assoc($rserrormsg)); ?>
<?php mysql_data_seek($rserrormsg, 0);
$row_rserrormsg = mysql_fetch_assoc($rserrormsg);?>
</select>
</td>
<TD align="center" class="adminuser">
<input style="width:96%;text-align:left;" autocomplete="on" title="Enter Error Message" type="text" name="error[]" id="error[]" value="<?php echo $row_rsdates['error_message']; ?>" maxlength="100"/>
</TD>
假设你将使用jQuery,你的HTML是这样的:
<table>
<tr>
<td><select class="my_select" name="errormsg_id1[]" id="errormsg_id1">...</select></td>
<td><input name="errormsg_id1_txt" id="errormsg_id1_txt" title="..." />
</tr>
...
<tr>
<td><select class="my_select" name="errormsg_idX[]" id="errormsg_idX">...</select></td>
<td><input name="errormsg_idX_txt" id="errormsg_idX_txt" title="..." />
</tr>
</table>
这可以使用jQuery来完成:
$(document).ready(function(){
$('.my_select').change(function(){
$('#'+$(this).attr('id')+'_txt').val($(this).val());
});
});
希望它是正确的,没有时间测试它...
下面是一个 JSFiddle/DEMO,介绍如何让它与示例选择一起工作:
我认为这种方法比@shadyyx好一点,因为它消除了您手动递增输入和选择字段名称的需要。
<table>
<tr>
<td><select class="select" name="errormsg_id[]">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" title="..." />
</tr>
...
<tr>
<td><select class="select" name="errormsg_id[]">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" title="..." />
</tr>
</table>
和 JQuery:
$(document).ready(function(){
$('.select').change(function(){
$(this).parent().parent().find('.error_text').val($(this).val());
});
});
注意:如果您使用的是纯Javascript,请参阅此演示
<table>
<tr>
<td><select class="select" name="errormsg_id[]" id="errormsg_id1" onChange="update('errormsg_id1')">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text"name="errormsg_id_txt[]" id="errormsg_id_txt1" title="..." />
</tr>
...
<tr>
<td><select class="select" name="errormsg_id[]" id="errormsg_id2" onChange="update('errormsg_id2')">
<option val="test1">Test1</option>
<option val="test2">Test2</option>
<option val="test3">Test3</option>
</select></td>
<td><input class="error_text" name="errormsg_id_txt[]" id="errormsg_id_txt2" title="..." />
</tr>
</table>
和Javascript:
function update(element){
var e = document.getElementById(element);
var id = element.substring(element.length-1);
document.getElementById("errormsg_id_txt"+id).value = e.value;
}
您需要想办法唯一标识相应的元素集。我建议的最方便的方法是使用数据行的主键值。
例子就像
while($row = mysqli_fetch_assoc($result)) {
$id = $row['id']; //A primary key field
echo '<input type="text" name="text'.$id.'" id="text'.$id.'" />';
echo '<select name="select'.$id.'" id="select'.$id.'" />...</select>";
}
接下来,从选择菜单中调用一个函数,以便仅更新相关的文本框。更新上面的选择部分以阅读与此类似的内容。
echo '<select name="select'.$id.'" id="select'.$id.'" onchange="updateBox(''text'.$id.''', this.value)" />...</select>";
现在,创建一个非常简单的简单函数来更新文本框。
function updateBox(element, value) {
el = document.getElementById(element);
el.value = value;
}
相关文章:
- 单击鼠标,用MySQL数据填充html表单输入字段
- 如何用URL预填充wufoo字段
- 根据Rails4中的一个字段自动填充表单
- 在输入字段中选择一个值,然后用相应的数据填充另一个字段
- 自动填充动态字段上的 ajax 响应
- Angularjs 通过选择不同选择框中的两个字段来填充选择框
- 如何使用与单个查找字段相关的信息填充字段
- 使用 JSON 数组填充输入字段
- 动态填充字段的Jquery验证
- IE JavaScript参数和填充输入字段
- 从替代字段填充 jquery UI 日期选择器日期字段
- 基于一个输入字段填充另一个输入字段
- 翡翠选择字段填充数据
- html5输入字段填充问题
- 根据ID号字段填充性别和出生日期字段
- 量角器测试通过,但无法看到搜索字段填充
- 从多个输入字段填充字段
- Javascript:如何打开一个字段填充参数的表单
- 根据另一个字段填充输入
- 高级自定义字段/基于另一个字段填充选择