怎么通过select选中的项动态改变一个input输入项的值

如何通过select选中的项动态改变一个input输入项的值？
如下面的select和input:

<select name="group_id">
       <c:forEach  var="group" items="${groups }">
        <option value="${group.id }">${group.name }</option>
      </c:forEach>
</select>

<input type="text" name="url"   size="100" value="http://192.168.1.3/">

<!-- select的每个option项是循环List<Group> groups集合得到的 ，要求：当option选中的时候，在下面的input输入项的值后面追加
选中的group对像的id+"/"+选中的group对像的name-->
------解决思路----------------------

<select name="group_id" id="group_id">

          <c:forEach  var="group" items="${groups }">

              <option value="${group.id }" area="${group.area}">${group.name }</option>

         </c:forEach>

</select>

 

<input id="url" type="text" name="url"   size="100" value="http://192.168.1.3/">

<Script>

  var group_id=document.getElementById('group_id');

  group_id.onchange=function(){

 document.getElementById('url').value="http://192.168.1.3/"+this.value+"/"+this.options[this.selectedIndex].innerText+"/"+this.options[this.selectedIndex].getAttribute('area');

  }

  group_id.onchange.call(group_id);

  </script>