如何使select框既可以輸入又可以選擇
阿新 • • 發佈：2019-02-07
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="fatherdiv">
<span style="position: absolute;"> <select class="inputvalue"
style="width:190px;height: 20px; margin: -2px;">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</span> <span style="position: absolute; height: 19px;"> <input
type="text" value="請選擇或輸入"
style="width: 170px; height: 15px; border: 0pt;">
</span>
</div>
</body>
<script type="text/javascript">
var contextPath = '${contextPath}';
</script>
<script src="${contextPath}/jquery-1.8.3.min.js"></script>
<script language="javascript">
$('.fatherdiv').on('change','.inputvalue',function(){
console.info($(this).children('option:selected').text());
$(this).parent('span').siblings('span').children('input').val($(this).children('option:selected').text());
});
</script>
</html>
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="fatherdiv">
<span style="position: absolute;"> <select class="inputvalue"
style="width:190px;height: 20px; margin: -2px;">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</span> <span style="position: absolute; height: 19px;"> <input
type="text" value="請選擇或輸入"
style="width: 170px; height: 15px; border: 0pt;">
</span>
</div>
</body>
<script type="text/javascript">
var contextPath = '${contextPath}';
</script>
<script src="${contextPath}/jquery-1.8.3.min.js"></script>
<script language="javascript">
$('.fatherdiv').on('change','.inputvalue',function(){
console.info($(this).children('option:selected').text());
$(this).parent('span').siblings('span').children('input').val($(this).children('option:selected').text());
});
</script>
</html>