基本信息
源码名称：ajax加载下拉框搜索框
源码大小：0.24M
文件格式：.zip
开发语言：js
更新时间：2018-10-30
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 


<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带搜索过滤ajax加载下拉框代码 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/tinyselect.css">
</head>
<body>
<div class="zzsc-container">
	<div class="zzsc-content">
		<div class="row">
			<div class="cell">
				<div class="desc">这个例子使用静态的选项数据</div>
				<select id="select1" style="width: 100%;">
					<option value="-1">option a</option>
					<option value="1">option b</option>
					<option value="2">option c</option>
					<option value="3">option d</option>
					<option value="4">option e</option>
					<option value="5">option f</option>
					<option value="6">option g</option>
					<option value="7">option h</option>
				</select>
			</div>
			<div class="cell">
				<div class="desc">这个例子不提供搜索过滤功能</div>
				<select id="select2" style="width: 100%;">
					<option value="-1">option a</option>
					<option value="1">option b</option>
					<option value="2" selected>option c</option>
					<option value="3">option d</option>
					<option value="4">option e</option>
					<option value="5">option f</option>
					<option value="6">option g</option>
					<option value="7">option h</option>
				</select>
			</div>
		</div>
		<div class="row">
			<div class="cell">
				<div class="desc">这个例子从file.json加载数据。不带初始选项。带搜索过滤功能。</div>
				<select id="select3" style="width: 100%;">
					<option value="-1">---</option>
				</select>
			</div>
			<div class="cell">
				<div class="desc">这个例子从file.json加载数据。带初始选项。不带搜索过滤功能。</div>
				<select id="select5" style="width: 340px;">
					<option value="1">abc</option>
				</select>
			</div>
		</div>
		<div class="row">
			<div class="cell">
				<div class="desc">Note: 插件在json数据格式不正确时会得到错误的结果。</div>
				<select id="select4">
					<option value="-1">---</option>
				</select>
			</div>
		</div>
	</div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/tinyselect.js"></script>
<script>
/* This parser won't respect "---" selection */
function dataParserA(data, selected) {
	retval = [ { val: "-1" , text: "---" } ];

	data.forEach(function(v){
		if(selected == "-1" && v.val == 3)
			v.selected = true;
		retval.push(v); 
	});

	return retval;
}

/* This parser let's the component to handle selection */
function dataParserB(data, selected) {
	retval = [ { val: "-1" , text: "---" } ];
	data.forEach(function(v){ retval.push(v); });
	return retval;
}

/* Create select elements */
$("#select1").tinyselect();
$("#select2").tinyselect({ showSearch: false });
$("#select3").tinyselect({ dataUrl: "file.json" , dataParser: dataParserA });
$("#select4").tinyselect({ dataUrl: "failure.json" });
$("#select5").tinyselect({ dataUrl: "file.json" , dataParser: dataParserB });

$("#select2").on("change",function() {
	console.log($(this).val());
});

$("#havoc").show()

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>