`
xuepengcheng
  • 浏览: 46377 次
  • 性别: Icon_minigender_1
  • 来自: 郴州
社区版块
存档分类
最新评论

搜索多选-js

阅读更多
<form action="" id="star_f_search" method="GET">
        <input type="hidden" id="region_val" name="region_val" value="4|2">
        <input type="hidden" id="con_val" name="con_val" value="3|8|4|5|7">
        <input type="hidden" id="char_val" name="char_val" value="G|H|K">
</form>

<div id="star_region" class="item">
       <a v="1" href="javascript:;">内地</a>
        <a v="2" style="color:rgb(33, 110, 201)" href="javascript:;">港台</a>
        <a v="3" href="javascript:;">亚洲</a>
        <a v="4" style="color:rgb(33, 110, 201)" href="javascript:;">欧美</a>
        <a v="5" href="javascript:;">其它</a>
</div>

<script type="text/javascript">
$(document).ready(function(){
 
  $("#star_region a").bind('click',function(){
checkSelectVal($("#region_val"),$(this));
  });

})

function checkSelectVal(obj,selectObj){
var temp = obj.val();
var val = selectObj.attr('v');
var field = new Array();
if(temp == ''){
obj.val(val);
selectObj.css('color','rgb(33, 110, 201)');
}else{
field = temp.split('|');
var mark = -1;
for(var key in field){
if(field[key] == val){
mark = key;break;
}
}
if(mark != -1){
field.splice(key, 1);
selectObj.css('color','');
}else{
field.push(val);
selectObj.css('color','rgb(33, 110, 201)');
}
var str = field.join('|');
obj.val(str);
}
}
</script>
分享到:
评论

相关推荐

    layui-多选下拉框-xm-select-demo源码

    3. 使用layui的API初始化xm-select组件,通过配置项调整组件的行为,如是否开启搜索、显示模式等。 4. 如果需要动态加载数据,可以使用layui的异步请求方法,结合xm-select的回调函数进行数据绑定。 值得注意的是,...

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    用户可以通过键盘的上下箭头导航,使用Ctrl或Shift键进行多选,还可以在输入框中搜索选项。 此外,bootstrap-select还提供了丰富的API和事件,你可以根据需求进行定制。例如,你可以监听`changed.bs.select`事件来...

    select下拉框支持搜索并可多选

    `fSelect.js` 是一个可能用于实现这个功能的JavaScript文件,它可能包含了自定义的下拉框选择器,提供了搜索和多选的逻辑。JavaScript库如jQuery(`jquery-1.11.3.min.js`)通常被用来简化DOM操作,处理事件监听和...

    jQuery插件-多选全选实时搜索下拉框

    **jQuery插件-多选全选实时搜索下拉框** 在前端开发中,用户界面的交互性和用户体验至关重要。jQuery作为一款强大的JavaScript库,为开发者提供了许多便利,使得创建动态、响应式的网页变得更加容易。"jQuery插件-...

    xm-select,一款简单多选的select插件

    只需要引入必要的CSS和JS文件,通过简单的配置,就能实现一个功能完备的多选下拉框。在描述中提到,文件包含了DEMO,这对于初学者来说,是一个很好的学习起点,可以通过查看和运行示例代码快速理解插件的工作原理和...

    angularjs ui-select2 多选下拉所需资源文件

    AngularJS是一款强大的前端JavaScript框架,而select2是一个流行的jQuery插件,它提供了美观且功能丰富的选择器组件,包括单选和多选下拉列表。 **一、AngularJS与ui-select2简介** AngularJS通过数据绑定和依赖...

    uniapp/h5多选模糊搜索下拉框(可以进行搜索匹配以及多选功能)

    uniapp/h5通用模糊下拉搜索下拉多选框; 使用步骤: 1、下载资源包,并进行解压; 2、将components文件夹中的文件拷贝到自己项目的components文件夹中; 3、在业务文件夹中引用组件multipleDataPickey,使用实例如...

    前端 layui-fromSelects 下拉框多选,搜索

    在本主题中,我们主要探讨的是如何利用 Layui 实现一个功能完备的下拉框选择器,支持多选、搜索以及反选功能。 一、Layui Form Selects Layui 的 Form Selects 是一个强大的下拉选择组件,它不仅提供了基本的单选...

    下拉框搜索多选

    3. 配置组件:通过JavaScript或TypeScript代码设置下拉框的选项、多选行为和搜索功能。 4. 样式调整:根据需求定制组件的外观,可以使用Bootstrap的预定义样式或自定义CSS。 5. 数据管理:确保所选选项的状态能在...

    使用bootstrap实现多选下拉框

    这样,你就可以创建一个具有Bootstrap风格的多选下拉框,同时还提供了搜索功能,使得用户能够更加方便地找到并选择所需的选项。记得在实际项目中根据需求调整样式和功能,以提供最佳的用户体验。

    js多选下拉列表

    在网页开发中,"js多选下拉列表"是一种常见的用户界面元素,它允许用户从一个下拉菜单中选择多个选项。多选下拉列表在数据筛选、设置配置或者进行多值选择时非常实用。本篇文章将深入探讨这一主题,包括复选下拉列表...

    layui下拉多选,下拉选择多选

    下面将详细阐述如何在Layui框架下实现下拉多选功能,并探讨其相关的知识点。 1. Layui的基本概念 Layui 是一套采用自身模块规范编写的前端 UI 框架,它对 Bootstrap 进行了全面的汉化和组件优化,适用于后台管理、...

    weui多选组件

    WeUI的多选组件虽然提供了基本的功能,但开发者可以根据项目需求进行扩展,如添加搜索功能、分页、选项分类等,以满足更复杂的业务场景。 8. **性能优化** 考虑到大量选项可能带来的性能问题,可以采用虚拟滚动...

    jQuery bootstrap-select下拉多选和搜索

    **jQuery bootstrap-select 下拉多选和搜索 插件详解** 在网页开发中,为了提高用户体验,经常需要使用到下拉列表。然而,传统的HTML `&lt;select&gt;` 标签往往功能有限,无法满足复杂的交互需求,如多选和搜索功能。...

    进行模糊查询+多选功能的下拉框(select) 模糊加载

    在"模糊搜索+多选下拉框"这个实现中,我们可以推测开发者可能使用了JavaScript库,如jQuery,来增强原生的HTML `&lt;select&gt;`。文件名"jquery.automultiselect"暗示了这个实现可能基于jQuery,利用其强大的DOM操作和...

    bootstrap-select下拉选择搜索框,可以多选和单选

    1. **引入依赖**:首先,确保在页面中引入Bootstrap的CSS和JavaScript文件,以及Bootstrap Select的CSS和JS文件。这些文件可以从官方网站或者CDN获取。 2. **HTML结构**:在HTML中创建`&lt;select&gt;`元素,为每个可选项...

    layui多选下拉框样式,整套layui-select-multiple

    此外,Layui的多选下拉框还支持搜索功能,用户可以在下拉框内输入关键字快速筛选选项,大大提高了操作效率。 关于“取值”,在Layui的多选下拉框中,你可以通过JavaScript事件来获取用户的选择。当用户完成选择后,...

    vuejstree是一个用于Vue20的树形插件

    Vue.js,由尤雨溪创建,是一种轻量级的前端JavaScript框架,以其简单易用、高效灵活的特点深受开发者喜爱。它采用声明式编程,允许开发者通过模板语法来定义UI,实现了数据和视图的双向绑定,极大地简化了前端开发...

    dtree实现的树支持多选

    DTree(通常指的是JavaScript实现的树形控件)允许用户通过勾选节点来实现多选功能,提升了用户在大量数据中的选择效率。以下将详细介绍dtree实现多选树的核心知识点: 1. **DHTML与JavaScript基础**:DTree基于...

    jQuery多选下拉框插件

    总之,`jquery.multi-select.js`是提高网页中多选下拉框用户体验的有效工具,它结合了jQuery的强大功能和易用性,使得Web开发变得更加简单和高效。无论是初学者还是经验丰富的开发者,都能从中受益。

Global site tag (gtag.js) - Google Analytics