Question

如何根据下拉列表选择自动设置文本框？我有部门的位置和文本框的下拉列表。我想做的是什么时候＆＃34; Guidance Faculty＆＃34;从下拉列表中选择，文本框将自动设置为＆＃34; Guidance＆＃34;当＆＃34; OSA Faculty＆＃34;并且它将变得只读和相同。从下拉列表中选择，文本框将自动设置为＆＃34; OSA＆＃34;它将成为只读。如果＆＃34;部门主席＆＃34;和＆＃34;教授＆＃34;选择文本框不会发生任何事情，或者它将设置为＆＃34;＆＃34;。

this.props.products.map(function(item, i) {
  return (
    <tr key={ i } onClick={() => {
        const arrayForOnClick = [item['id'], item['name'], item['price']]
        this.handleTableString(item['id'], item['name'], item['price'])
      } }>
      <td>{ item['id'] }</td>
      <td>{ item['name'] }</td>
      <td>{ item['price'] }</td>
    </tr>
  )
}, this)

Answer 1

试试这个：

<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>

Answer 2

使用下面的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>

<强>更新

参见演示

    var pos = document.querySelector('#pos');
    var dept = document.querySelector('[name="department"]'); 
    pos.addEventListener('change',function(){
      dept.value = this.value;
    });

<select id="pos">
 <option value="" selected >Select Position</option>
 <option value="Department Chair">Department Chair</option>
 <option value="Professor">Professor</option>
 <option value="Guidance Faculty">Guidance Faculty</option>
 <option value="OSA Faculty">OSA Faculty</option>
</select>
<input class="form-control" name="department" placeholder="Department" type="text"/>

Answer 3

在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);
   }

});

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

3 个答案: