您的位置：首页 > Web前端 > BootStrap

Bootstrap 组件之下拉框createOption用法详解

2018-01-01 17:49 465 查看

Bootstrap 组件之下拉框createOption用法详解

前言：
很多时候，在一个系统中经常会用到下拉框(表单)，这样的组件，例如下图中的下拉框，今天我就讲述一下，在实际项目中的实战

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 初始化下拉框 -->
<script src="plugins/utils/createOption.js"></script>
<script src="plugins/utils/createOptions.js"></script>
</head>

<body class="gray-bg">

<div class="col-sm-2">
<select class="form-control" name="sectionName" id="sectionName" value="${pd.sectionName}"
ajax--url="/api/qa/full_qa_section_list" ajax--column="ID,TEXT" style="width:140px;">
<option value="">--选择板块--</option>
</select>
</div>

<script type="text/javascript">
$(document).ready(function(){
//初始化下拉菜单
$("#sectionName").createOption();
});
</script>

</body>
</html>

createOption.js

<script src="plugins/utils/createOption.js"></script>

(function($){
$.fn.extend({
createOption:function(){
var $select=$(this);
var selectVal=$select.attr("value");
var url=$select.attr("ajax--url");
var column=$select.attr("ajax--column");
var dicCode =$select.attr("dicCode");

if (column==undefined||column==""){
column="ID,TEXT";
}
var t_id=column.split(",")[0];
var t_text=column.split(",")[1];

if(dicCode==undefined||dicCode==''){
//如果url为空则返回
if (url==undefined||url==""){
return;
}
$.ajax({
type: "POST",
url:url,
async: false,//要指定不能异步
dataType:"json",
contentType:"application/x-www-form-urlencoded",
success: function(data) {
var options='';
$.each(data,function(n,value){
var id=value[t_id];
var text=value[t_text];

var selected='';
if(selectVal==id){
selected='selected=" "';
}
options=options+'<option value="'+id+'"'+selected+'>'+text+'</option>';
});
$select.append(options);
/* debugger;
console.log(options);
console.log($select);*/
}
});
}else{
$.ajax({
type: "POST",
url:"dic/getDicByCode",
data:{"code":dicCode},
async: false,//要指定不能异步
dataType:"json",
success: function(data) {
var arr = data.split(',');
var options='';
$.each(arr,function(n,value){
var optionArr = value.split(':');
var id=optionArr[0];
var text=optionArr[1];
var selected='';
if(selectVal==id){
selected='selected=" "';
}
options=options+'<option value="'+id+'"'+selected+'>'+text+'</option>';
});
$select.append(options);
}
});
}
}
});
})(jQuery);

createOptions.js

<script src="plugins/utils/createOptions.js"></script>

(function($){
$.fn.extend({
createOptions:function(params){
var $select=$(this);
var selectVal=$select.attr("value");
var url=$select.attr("ajax--url");
var column=$select.attr("ajax--column");
var dicCode =$select.attr("dicCode");
/*debugger;
console.log(params);
console.log("1-------------");*/

if (column==undefined||column==""){
column="ID,TEXT";
}
var t_id=column.split(",")[0];
var t_text=column.split(",")[1];

if(dicCode==undefined||dicCode==''){
//如果url为空则返回
if (url==undefined||url==""){
return;
}
$.ajax({
type: "POST",
url:url,
data:params,
async: false,//要指定不能异步
dataType:"json",
success: function(data) {
//console.log(data);
var options='';
$.each(data,function(n,value){
var id=value[t_id];
var text=value[t_text];

var selected='';
if(selectVal==id){
selected='selected=" "';
}
options=options+'<option value="'+id+'"'+selected+'>'+text+'</option>';
});
$select.empty();
$select.append(options);
}
});
}else{
$.ajax({
type: "POST",
url:"dic/getDicByCode",
data:{"code":dicCode},

4000
async: false,//要指定不能异步
dataType:"json",
success: function(data) {
var arr = data.split(',');
var options='';
$.each(arr,function(n,value){
var optionArr = value.split(':');
var id=optionArr[0];
var text=optionArr[1];
var selected='';
if(selectVal==id){
selected='selected=" "';
}
options=options+'<option value="'+id+'"'+selected+'>'+text+'</option>';
});
$select.append(options);
}
});
}
}
});
})(jQuery);

About Me：

Github地址：https://github.com/noseparte
Email: noseparte@aliyun.com

有java与hadoop相关的技术问题，可以发私信与我交流。
NPM地址: https://www.npmjs.com/~noseparte
WebSite: http://www.noseparte.com/ Copyright
© 2017 noseparte

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap javascript

相关文章推荐

新的分享

章节导航