chosen.jqeury.js 下拉选择框插件demo

最新推荐文章于 2022-09-01 16:58:04 发布

火蚂蚁cui

最新推荐文章于 2022-09-01 16:58:04 发布

阅读量445

点赞数

本文链接：https://blog.csdn.net/cuilei210/article/details/103613623

版权

1、需下载引入jquery.min.js和chosen.jquery.js
2、HTML页面，index.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>chosen下拉选择框</title>
	<link type="text/css" href='css/chosen-v1.5.1.css' rel='stylesheet'/>
	<style type="text/css">
		.w-country{width:100px;}
	</style>

	<script type="text/javascript" src='js/jquery.min.js'></script>
	<script type="text/javascript" src='js/chosen.jquery.js'></script>
</head>
<body>
	<!-- 多选 -->
	<select class='w-country chosen' data-placeholder='请选择国家' multiple>
		<option value=""></option>
		<option value="China">中国</option>
		<option value="US">美国</option>
		<option value="England">英国</option>
		<option value="Canada">加拿大</option>
		<option value="Cube">古巴</option>
	</select>
	<br/><br/>

	<!-- 分组 -->
	<select class='chosen'>
		<option value=""></option>
		<optgroup label="亚洲">
			<option value ="1">中国</option>
			<option value ="2">朝鲜</option>
			<option value ="3">韩国</option>
		</optgroup>
		<optgroup label="欧洲">
			<option value ="4">德国</option>
			<option value ="5">法国</option>
		</optgroup>
	</select>
	<br/><br/>

	<!-- 分词搜索 -->
	<select class='chosen2'>
		<option value=""></option>
		<option value="vegetable">西红柿 黄瓜 芹菜</option>
		<option value="fruit">葡萄 草莓 芭乐[潘石榴]</option>
	</select>
	<br/><br/>

	<!-- ajax获取数据搜索 -->
	<select class='w-country chosen3' data-placeholder='请选择'>
		<option value="">请选择</option>
	</select>
	<button type="button" id="get_valule">获取数据</button>

<script type="text/javascript">
$(function(){
	// 多选、分组
  	$('.chosen').chosen({
        no_results_text: "没有找到结果！",//搜索无结果时显示的提示  
        search_contains:true,   //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配
        allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项
        disable_search: true, //禁用搜索。设置为true，则无法搜索选项。
        disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
        inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承
        placeholder_text_single: '选择国家', //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。
        width: '400px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度，也会被width覆盖。
        max_shown_results: 1000, //下拉框最大显示选项数量
        display_disabled_options: false,
        single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除
        case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
        group_search: true, //选项组是否可搜。此处搜索可搜
        include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。
    });

  	// 分词搜索
	$('.chosen2').chosen({
	    search_contains:false, 
	    enable_split_word_search: true //分词搜索，选项词可通过空格或'[]'分隔。search_contains为false时才能看出效果
	});

	// ajax获取数据搜索
	$('#get_valule').click(function(){
		$.post(
			"index.php",
			{},
			function(res){
				$('.chosen3').html(res);
				$('.chosen3').trigger("chosen:updated"); //加载完毕之后重新刷新,解决动态加载数据不生效的问题
			}
		)
	})
	$('.chosen3').chosen();
});
</script>
</body>

2、PHP代码（对于ajax获取数据的搜索），index.php

<?php
	header("Content-Type:text/html;charset=utf-8");
	
	$arr = [
		['id'=>1,'name'=>'中国'],
		['id'=>2,'name'=>'美国'],
		['id'=>3,'name'=>'英国'],
		['id'=>4,'name'=>'加拿大'],
		['id'=>5,'name'=>'古巴']
	];

	$html = '<option value="">请选择</option>';
	foreach($arr as $v){
		$html .= '<option value="'.$v['id'].'">'.$v['name'].'</option>';
	}

	echo $html;
	exit;
?>

在这里插入图片描述

火蚂蚁cui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chosen.jqeury.js 下拉选择框插件demo

1、需下载引入jquery.min.js和chosen.jquery.js2、HTML页面，index.html<!doctype html><html><head> <meta charset="utf-8"> <title>chosen下拉选择框</title> <link type="text/cs...
复制链接

扫一扫