Javascript 选择下拉菜单时，onchange函数将填充文本框

这是数据库中我的表

tbl_职务_头衔

ID | Job_title    | description     | 
1  | Accountant   | Handle Accounts |
2  | Dev. Support | Support Centre  |

<input type="text" id="catch_value">

从表格中选择职务时，我使用的是下拉菜单，下面是我的代码

<select id="job_title" >
   <option value=""> </option>
     <?php foreach ($job_title as $row): ?>
       <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
       </option>
     <?php endforeach?>
</select>

我有一个文本框，如果我选择了一个职位，就会填充它

<input type="text" id="catch_value">

如何填充文本框当我选择“示例为会计”时，文本框值必须为“处理帐户”

 $('#job_title').change(function(){
  $('#catch_value').val('Handle Accounts');
 }); 

参见小提琴：

或者您可以添加if stations

 $('#job_title').change(function(){
    var jt = $('#job_title').val();
if(jt == "Something")
{
  $('#catch_value').val('Handle Accounts');
}
if (jt == "SomethingElse")
{
   $('#catch_value').val('somethingelse');
}
 }); 

my_Controller.php

---

这是我为您编写的简短而甜蜜的代码，请随意使用！ 不需要Ajax

代码-

---

这是正确的答案：

    <select id="job_title" onchange='populate()'>
   <option value=""> </option>
    <?php foreach ($job_title as $row): ?>
    <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
   </option>
 <?php endforeach?>
  </select>

   <script>
       function populate(){
        var jobttl= document.getElementById('job_title').value();
        if(jobttl){
          document.getElementById('catch_value').value;
        }

        }
   </script>

---

这只会将其设置为处理帐户，而不管选择哪一个。该值来自数据库。如何获取该值？因此您希望输入文本值与所选选项值相同？否，输入文本值将是数据库中的描述。你读过这个问题吗？如果你想得到其他数据，你需要ajax来调用db来获得描述值。正如Niles刚才回答的那样，您在JSFIDLE中有这样的示例吗？这非常容易实现。你面临什么样的问题。这段代码中的混乱在哪里？我对some.php感到困惑，我使用的是codeigniter。Sorry你有没有其他选项来代替ajax？谢谢你的尝试，但我需要的是，当我输入Accountant时，文本框将填充Handle Accounts，就像上面的示例中那样，我正在数据库中连接。thansk@Vincent现在我已经更新了我的代码&还尝试了新的fiddle-@Vincent需要编写角色=我有一个问题。为什么我需要为工作上课？我使用的是每一个我可以删除类吗？我在这里有一个错误，我警告了n值，您有用于此的示例JSFIDLE吗？

    public function update()
    {
        $id = $this->input->post('id');
        $data['discription'] = call model function for get data form database

        echo json_encode($data);
    }

<select id="job_title" >
   <option value="" class="job" role=""> </option>
     <?php foreach ($job_title as $row): ?>
       <option value="<?php echo $row['id']; ?>" class="job<?php echo $row['id']; ?>" role="<?php echo $row['description']; ?>"><?php echo $row['title']; ?>
       </option>
     <?php endforeach?>
</select>

$('#job_title').on('change',function(){
    var m = this.value;
    var n = $('.job'+m).attr('role');
    $('#catch_value').val(n);
    return false;
});

    <select id="job_title" onchange='populate()'>
   <option value=""> </option>
    <?php foreach ($job_title as $row): ?>
    <option value="<?php echo $row['id']; ?>"><?php echo $row['title']; ?>
   </option>
 <?php endforeach?>
  </select>

   <script>
       function populate(){
        var jobttl= document.getElementById('job_title').value();
        if(jobttl){
          document.getElementById('catch_value').value;
        }

        }
   </script>