Php 如何根据下拉选择自动设置文本框?

Php 如何根据下拉选择自动设置文本框?,php,codeigniter,dropdown,Php,Codeigniter,Dropdown,如何根据下拉选择自动设置文本框?我有一个职位下拉列表和部门文本框。我想做的是,当从下拉列表中选择“指导教师”时,文本框将自动设置为“指导教师”,并将变为只读;当从下拉列表中选择“OSA教师”时,文本框将自动设置为“OSA”,并将变为只读。而如果选择了“系主任”和“教授”,文本框将不会发生任何变化或设置为“” 位置 部门 试试这个: <div class="form-group"> <label for="position">Position</label&

如何根据下拉选择自动设置文本框?我有一个职位下拉列表和部门文本框。我想做的是,当从下拉列表中选择“指导教师”时,文本框将自动设置为“指导教师”,并将变为只读;当从下拉列表中选择“OSA教师”时,文本框将自动设置为“OSA”,并将变为只读。而如果选择了“系主任”和“教授”,文本框将不会发生任何变化或设置为“”


位置
部门
试试这个:

<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下拉列表
?如果不先加载它。请参阅编辑代码中的演示。像这样试试……它很管用