<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>
分享到:
相关推荐
3. 使用layui的API初始化xm-select组件,通过配置项调整组件的行为,如是否开启搜索、显示模式等。 4. 如果需要动态加载数据,可以使用layui的异步请求方法,结合xm-select的回调函数进行数据绑定。 值得注意的是,...
用户可以通过键盘的上下箭头导航,使用Ctrl或Shift键进行多选,还可以在输入框中搜索选项。 此外,bootstrap-select还提供了丰富的API和事件,你可以根据需求进行定制。例如,你可以监听`changed.bs.select`事件来...
`fSelect.js` 是一个可能用于实现这个功能的JavaScript文件,它可能包含了自定义的下拉框选择器,提供了搜索和多选的逻辑。JavaScript库如jQuery(`jquery-1.11.3.min.js`)通常被用来简化DOM操作,处理事件监听和...
**jQuery插件-多选全选实时搜索下拉框** 在前端开发中,用户界面的交互性和用户体验至关重要。jQuery作为一款强大的JavaScript库,为开发者提供了许多便利,使得创建动态、响应式的网页变得更加容易。"jQuery插件-...
只需要引入必要的CSS和JS文件,通过简单的配置,就能实现一个功能完备的多选下拉框。在描述中提到,文件包含了DEMO,这对于初学者来说,是一个很好的学习起点,可以通过查看和运行示例代码快速理解插件的工作原理和...
AngularJS是一款强大的前端JavaScript框架,而select2是一个流行的jQuery插件,它提供了美观且功能丰富的选择器组件,包括单选和多选下拉列表。 **一、AngularJS与ui-select2简介** AngularJS通过数据绑定和依赖...
uniapp/h5通用模糊下拉搜索下拉多选框; 使用步骤: 1、下载资源包,并进行解压; 2、将components文件夹中的文件拷贝到自己项目的components文件夹中; 3、在业务文件夹中引用组件multipleDataPickey,使用实例如...
在本主题中,我们主要探讨的是如何利用 Layui 实现一个功能完备的下拉框选择器,支持多选、搜索以及反选功能。 一、Layui Form Selects Layui 的 Form Selects 是一个强大的下拉选择组件,它不仅提供了基本的单选...
3. 配置组件:通过JavaScript或TypeScript代码设置下拉框的选项、多选行为和搜索功能。 4. 样式调整:根据需求定制组件的外观,可以使用Bootstrap的预定义样式或自定义CSS。 5. 数据管理:确保所选选项的状态能在...
这样,你就可以创建一个具有Bootstrap风格的多选下拉框,同时还提供了搜索功能,使得用户能够更加方便地找到并选择所需的选项。记得在实际项目中根据需求调整样式和功能,以提供最佳的用户体验。
在网页开发中,"js多选下拉列表"是一种常见的用户界面元素,它允许用户从一个下拉菜单中选择多个选项。多选下拉列表在数据筛选、设置配置或者进行多值选择时非常实用。本篇文章将深入探讨这一主题,包括复选下拉列表...
下面将详细阐述如何在Layui框架下实现下拉多选功能,并探讨其相关的知识点。 1. Layui的基本概念 Layui 是一套采用自身模块规范编写的前端 UI 框架,它对 Bootstrap 进行了全面的汉化和组件优化,适用于后台管理、...
WeUI的多选组件虽然提供了基本的功能,但开发者可以根据项目需求进行扩展,如添加搜索功能、分页、选项分类等,以满足更复杂的业务场景。 8. **性能优化** 考虑到大量选项可能带来的性能问题,可以采用虚拟滚动...
**jQuery bootstrap-select 下拉多选和搜索 插件详解** 在网页开发中,为了提高用户体验,经常需要使用到下拉列表。然而,传统的HTML `<select>` 标签往往功能有限,无法满足复杂的交互需求,如多选和搜索功能。...
在"模糊搜索+多选下拉框"这个实现中,我们可以推测开发者可能使用了JavaScript库,如jQuery,来增强原生的HTML `<select>`。文件名"jquery.automultiselect"暗示了这个实现可能基于jQuery,利用其强大的DOM操作和...
1. **引入依赖**:首先,确保在页面中引入Bootstrap的CSS和JavaScript文件,以及Bootstrap Select的CSS和JS文件。这些文件可以从官方网站或者CDN获取。 2. **HTML结构**:在HTML中创建`<select>`元素,为每个可选项...
此外,Layui的多选下拉框还支持搜索功能,用户可以在下拉框内输入关键字快速筛选选项,大大提高了操作效率。 关于“取值”,在Layui的多选下拉框中,你可以通过JavaScript事件来获取用户的选择。当用户完成选择后,...
Vue.js,由尤雨溪创建,是一种轻量级的前端JavaScript框架,以其简单易用、高效灵活的特点深受开发者喜爱。它采用声明式编程,允许开发者通过模板语法来定义UI,实现了数据和视图的双向绑定,极大地简化了前端开发...
DTree(通常指的是JavaScript实现的树形控件)允许用户通过勾选节点来实现多选功能,提升了用户在大量数据中的选择效率。以下将详细介绍dtree实现多选树的核心知识点: 1. **DHTML与JavaScript基础**:DTree基于...
总之,`jquery.multi-select.js`是提高网页中多选下拉框用户体验的有效工具,它结合了jQuery的强大功能和易用性,使得Web开发变得更加简单和高效。无论是初学者还是经验丰富的开发者,都能从中受益。