善恶资源网专注优秀技术教程分享网-傅汉松!

如何制作带下拉选择的搜索框功能

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是如何制作带下拉选择的搜索框功能

傅汉松

在建站课程里我们介绍了怎么制作网站搜索功能,这一节介绍一下功能更全的搜索功能,就是在搜索框前面放下拉选择功能,这样可以实现更精准的搜索。效果如下图:

怎么制作这种带下拉选择的搜索框功能呢?方法如下:

首先,我们需要先制作前面的下拉选择功能,要使用select标签,里面的option的value里放分类的ID;

<select Name="cat" class="cid">
<option value="1">找图片</option>
<option value="2">查热点</option>
<option value="3">查资讯</option>
</select>

然后,再制作后面的搜索框和按钮,这个使用input标签;

<input type="text" name="s" class="text lt" placeholder="请输入你要搜索的关键字" value="">
<input type="submit" class="btn rt" value="搜索">

最后将上面二段代码使用form标签进行包裹,就形成带有下拉选择的搜索框功能了。

<form method="get" action="<?PHP bloginfo('url'); ?>/" id="top-search">
<select name="cat" class="cid">
<option value="<?php echo $catid01;?>">找工长</option>
<option value="<?php echo $catid02;?>">查工地</option>
<option value="<?php echo $catid04[0];?>">查资讯</option>
</select>
<input type="text" name="s" class="text lt" placeholder="请输入你要搜索的关键字" value="">
<input type="submit" class="btn rt" value="搜索">
</form>

以上就是制作带下拉选择的搜索框功能的全部步骤,希望对于想制作这个功能的同学有帮助。


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 如何制作带下拉选择的搜索框功能
在建站课程里我们介绍了怎么制作网站搜索功能,这一节介绍一下功能更全的搜索功能,就是在搜索框前面放下拉选择功能,这样可以实现更精准的搜索。效果如下图:怎么制作这种...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    66.66ms