如何通过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-->

7 个解决方案

#1

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

<input id="url" type="text" name="url"   size="100" value="http://192.168.1.3/">
<Script>
  document.getElementById('group_id').onchange=function(){
 document.getElementById('url').value="http://192.168.1.3/"+this.value+"/"+this.options[this.selectedIndex].innerText;console.log(this.select);
  }
  </script>

#2

引用 1 楼 slwsss 的回复:

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

<input id="url" type="text" name="url"   size="100" value="http://192.168.1.3/">
<Script>
  document.getElementById('group_id').onchange=function(){
 document.getElementById('url').value="http://192.168.1.3/"+this.value+"/"+this.options[this.selectedIndex].innerText;console.log(this.select);
  }
  </script>

还在线吗 ，代码确实可用，有两点问题，第一：select要手动选中某个条目url才会变，一进页面的时候secect默认选中的那个项对应的url没变化，第二，url后面还需要再追加group对像的area,能再帮我改改吗？多谢多谢！

#3

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

#4

引用 3 楼 slwsss 的回复:

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

非常感谢，第一个问题已经解决了，第二个追加group对像的area值this.options[this.selectedIndex].getAttribute('area')取到的是null ,能帮我解决下么？

#5

引用 4 楼 mykoss 的回复:

测试是可以取得到的，你用什么浏览器的，把前台html贴出来看下

#6

引用 3 楼 slwsss 的回复:

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

非常感谢，是我自己的问题没看清楚你的代码，两个问题都完美解决了，太感谢你了。。

#7

引用 5 楼 slwsss 的回复:

Quote: 引用 4 楼 mykoss 的回复:

测试是可以取得到的，你用什么浏览器的，把前台html贴出来看下

是我自己的问题，没看到你加了一个area属性，我照加了之后就搞定了，太感谢你了 帮了我大忙了，