可选可输下拉框

博风

已于 2025-01-02 15:08:30 修改

阅读量292

点赞数

分类专栏：笔记前端文章标签：前端可选可输下拉框

于 2018-09-26 16:21:49 首次发布

本文链接：https://blog.youkuaiyun.com/Bof_jangle/article/details/82855145

版权

笔记同时被 2 个专栏收录

93 篇文章

订阅专栏

前端

32 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可选可输下拉框</title>
</head>
<body>
	<div style="position: relative;">
		<span style="margin-left: 100px; width: 18px; overflow: hidden;">
			<select id="content-type-select"
			style="width: 235px; margin-left: -86px; height: 31px;"
			onchange="contentTypeSelectChange()">
				<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
				<option value="multipart/form-data">multipart/form-data</option>
				<option value="application/json">application/json</option>
		</select>
		</span> <input type="text" id="content-type" name="contentType"
			style="width: 215px; margin-left: -239px; height: 31px; color: #000;"
			value="application/json">
	</div>
	<script>
		function contentTypeSelectChange(){
			var contentType = document.getElementById("content-type-select").value;
			document.getElementById("content-type").value = contentType;
		}
	</script>
</body>
</html>

<input type="text" list="optionsList" placeholder="请输入或选择...">
<datalist id="optionsList">
    <option value="选项1">
    <option value="选项2">
    <option value="选项3">
    <!-- 可以继续添加更多选项 -->
</datalist>