Php 如何根据下拉选择自动设置文本框?
如何根据下拉选择自动设置文本框?我有一个职位下拉列表和部门文本框。我想做的是,当从下拉列表中选择“指导教师”时,文本框将自动设置为“指导教师”,并将变为只读;当从下拉列表中选择“OSA教师”时,文本框将自动设置为“OSA”,并将变为只读。而如果选择了“系主任”和“教授”,文本框将不会发生任何变化或设置为“”Php 如何根据下拉选择自动设置文本框?,php,codeigniter,dropdown,Php,Codeigniter,Dropdown,如何根据下拉选择自动设置文本框?我有一个职位下拉列表和部门文本框。我想做的是,当从下拉列表中选择“指导教师”时,文本框将自动设置为“指导教师”,并将变为只读;当从下拉列表中选择“OSA教师”时,文本框将自动设置为“OSA”,并将变为只读。而如果选择了“系主任”和“教授”,文本框将不会发生任何变化或设置为“” 位置 部门 试试这个: <div class="form-group"> <label for="position">Position</label&
位置
部门
试试这个:
<div class="form-group">
<label for="position">Position</label>
<?php
echo form_open('signup');
$options = array(
'' => 'Select Position',
'Department Chair' => 'Department Chair',
'Professor' => 'Professor',
'Guidance Faculty' => 'Guidance Faculty',
'OSA Faculty' => 'OSA Faculty',
);
echo "<div class='drop_pos'>";
echo form_dropdown('position', $options, 'class="btn dropdown-toggle"', 'data-toggle="dropdown-menu" onChange="javascript:document.getElementsByName(\'department\').value=this.value;"');
?>
<div class="text-danger"><?php echo form_error('position');?></div>
</div>
</div>
<div class="form-group">
<label for="department">Department</label>
<input class="form-control" name="department" placeholder="Department" type="text" value="<?php echo set_value('Department');?>"/>
<span class="text-danger"><?php echo form_error('department');?></span>
</div>
位置
部门
试试这个:
<div class="form-group">
<label for="position">Position</label>
<?php
echo form_open('signup');
$options = array(
'' => 'Select Position',
'Department Chair' => 'Department Chair',
'Professor' => 'Professor',
'Guidance Faculty' => 'Guidance Faculty',
'OSA Faculty' => 'OSA Faculty',
);
echo "<div class='drop_pos'>";
echo form_dropdown('position', $options, 'class="btn dropdown-toggle"', 'data-toggle="dropdown-menu" onChange="javascript:document.getElementsByName(\'department\').value=this.value;"');
?>
<div class="text-danger"><?php echo form_error('position');?></div>
</div>
</div>
<div class="form-group">
<label for="department">Department</label>
<input class="form-control" name="department" placeholder="Department" type="text" value="<?php echo set_value('Department');?>"/>
<span class="text-danger"><?php echo form_error('department');?></span>
</div>
位置
部门
使用JS
如下
第一个像这样的下拉框
echo form_dropdown('position', $options, array('id'=>'pos','class'=>'btn dropdown-toggle','data-toggle'=>'dropdown-menu','onchange'=>'changefuc();'));
然后添加JS
<script type="text/javascript">
function changefuc(){
var pos = document.querySelector('#pos');
var dept = document.querySelector('[name="department"]');
pos.addEventListener('change',function(){
dept.value = this.value;
});
}
</script>
选择位置
系主任
教授
指导教师
OSA学院
使用JS
如下
第一个像这样的下拉框
echo form_dropdown('position', $options, array('id'=>'pos','class'=>'btn dropdown-toggle','data-toggle'=>'dropdown-menu','onchange'=>'changefuc();'));
然后添加JS
<script type="text/javascript">
function changefuc(){
var pos = document.querySelector('#pos');
var dept = document.querySelector('[name="department"]');
pos.addEventListener('change',function(){
dept.value = this.value;
});
}
</script>
选择位置
系主任
教授
指导教师
OSA学院
在jquery中类似这样的内容:
jQuery("select[name='position']").on("change", function() {
// value of selected option
var selectedPosition = $(this).val();
if (selectedPosition) {
// the inputbox
jQuery("input[name='department']").val(selectedPosition).attr('readonly', true);
} else {
jQuery("input[name='department']").val('').attr('readonly', false);
}
});
在jquery中,类似这样的内容:
jQuery("select[name='position']").on("change", function() {
// value of selected option
var selectedPosition = $(this).val();
if (selectedPosition) {
// the inputbox
jQuery("input[name='department']").val(selectedPosition).attr('readonly', true);
} else {
jQuery("input[name='department']").val('').attr('readonly', false);
}
});
你有没有尝试过什么来实现你的目标?你可以玩JavaScription你有没有尝试过实现你的目标?您可以使用javascriptyou can inspect,查看控制台并编写输出,这样我可以提供帮助我不知道如何在inspect元素中使用控制台,查看控制台并编写输出,以便我能提供帮助。我不知道如何在inspect元素中使用控制台。什么都没有发生。我不知道如何在inspect元素中使用控制台。只需刷新F12
,然后查看console
选项卡。是否先加载form
helper以使用form_下拉列表
?如果不先加载它,请参阅编辑中的演示代码。完全像这样尝试。它工作没有发生任何事情。我不知道如何在inspect元素中使用控制台。只需刷新F12
,然后查看console
选项卡。是否先加载form
帮助程序以使用form\u下拉列表
?如果不先加载它。请参阅编辑代码中的演示。像这样试试……它很管用