前端实现带输入框的下拉菜单

现带输入框的下拉菜单，方便用户在搜索时候可以根据历史记录快速定位自己要搜索的关键词！

效果如下：

实现代码：

html:

css:

javascript：

天是十一，祝大家十一快乐，伟大的国家建党百年，万岁万岁万岁！

之前讲了input表单控件，今天继续说下select下拉表单元素控件。使用场景:在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义。

我们来看下<select>表单元素的语法:

...

</select>

接下来看看实例:

可以看到这是一个下拉菜单，接着我们看看代码实现

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

籍贯:

</select>

</body>

</html>

可以看到，代码还是很简单的。一般下拉控件都是在表单中的，所以需要加上

<form>标签

看着没什么变化，看看代码:

<body>

<form>

籍贯:

</select>

</form>

</body>

<body>中增加了<form>表单

接着说下<select>里的一些规则:

<select>中至少包含一对<option>
在<option>中定义 <option selected="selected">时，当前项即为默认选择项。

可以看下效果，我们选择山西作为默认选择项。

看看代码，就是添加了 selected属性

接下来，我们看下表单元素中最后一个， textarea文本域元素

使用场景:

当用户输入内容较多的时候，就不能使用文本框表单了，需要使用 texttarea文本域 <textarea>标签，用于定义多行文本输入的控件。对应的语法为:

文本内容

</textarea>

</select>

我们来看下效果:

可以看到有一个可以输入的框，一般在框中都有预先写好的内容，比如请输入反馈

对应代码为:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<form>

今日反馈:

请输入您宝贵的意见

</textarea>

</form>

</body>

</html>

做个小总结:

1. 通过<textarea>标签可以轻松地创建多行文本输入框

2. cols="每行中的字符数" rows="显示的行数" 在实际开发中不会使用，一般都是用css来控制样式

来看下实际效果:

可以看到汉字最多输入10个，可以输入多行，但是在数据框当前页面展示了3行，如果是可以展示5行呢？

页面展示5行了，这块不要理解为只能显示N行。

看下对应的代码:

<form>

今日反馈:

<textarea cols="20" rows="5">请输入您宝贵的意见

</textarea>

</form>

好的，今天就先到这里

更多好文章，可以关注微信公众号 "蛋蛋杂谈"

avaweb

在我们日常的javaweb开发过程中呢，会经常遇到获取表单中的下拉菜单中的value以及他的text，下面我来教大家两种方法。（推荐第二种哈~，希望大家多多评论点赞呀，上一篇文章中，各位猿媛光想着收藏，都看不到你们给我写的评论，桑心~~）

假如我们的select长这样：

<select id="myselect">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

第一种呢是用我们比较常见的JQuery

var $selected=$("#myselect option").filter(":selected");

获取文本： $selected.text();

获取value: $selected.val();

第二种呢当然是我们的原生js啦~~（推荐哟，收藏评论哈~）

var e=document.getElementById("myselect");

获取文本：var text=e.options[e.selectedIndex].text;

获取value: e.value;

我在后续的文章中，会分享更多更实用的开发小技巧给大家，希望大家多多关注！

在线咨询

上一篇：办公小技巧：杜绝意外让字体永不丢失
下一篇：不合群有什么好处？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端实现带输入框的下拉菜单

您的项目需求