为什么多重选择不适用于jquery？
[英]Why multiple selection is not working on jquery?
问题描述
我想在我的ASP页面中使用多项选择。 我已经遵循了jQuery插件的pickList。 我按照下面的链接进行操作：
http://jquery-plugins.net/picklist-simple-pick-list-with-jquery-and-bootstrap
这是我的ASP页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testWebForm.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="css/pickList.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/pickList.js"></script>
<title></title>
<style>
div.container {
width: 100%;
border: 1px solid gray;
height: 100vh;
}
header, footer {
padding: 1em;
color: white;
background-color: #8dc060;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
li {
background: #90EE90;
}
li:nth-child(odd) {
background: #00BFFF;
}
body, html {
height: 100%;
}
</style>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowCurrentValue() {
var name = $("#name").val();
var countryname = $("#countryname").val();
var companyname = $("#companyname").val();
$.ajax({
type: "POST",
url: "testWebForm.aspx/GetCurrentTime",
data: JSON.stringify({ name: name, countryname: countryname, companyname: companyname }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
alert(response.d);
}
$(document).ready(function () {
var val = {
01: { id: 01, text: 'Isis' },
02: { id: 02, text: 'Sophia' },
03: { id: 03, text: 'Alice' },
04: { id: 04, text: 'Isabella' },
05: { id: 05, text: 'Manuela' },
06: { id: 06, text: 'Laura' },
07: { id: 07, text: 'Luiza' },
08: { id: 08, text: 'Valentina' },
09: { id: 09, text: 'Giovanna' },
10: { id: 10, text: 'Maria Eduarda' },
11: { id: 11, text: 'Helena' },
12: { id: 12, text: 'Beatriz' },
13: { id: 13, text: 'Maria Luiza' },
14: { id: 14, text: 'Lara' },
15: { id: 15, text: 'Julia' }
};
var pick = $("#pickList").pickList({ data: val });
$("#getSelected").click(function () {
console.log(pick.getValues());
});
$("#registration").click(function (e) {
$("#replace").html('');
var htmll = "<div>Name: <input type='text' id='name'></div>"+
"<div>Country: <input type='text' id='countryname'></div>"+
"<div>Company: <input type='text' id='companyname'></div>"+
"<div><input type='button' value='Submit' id='submitbtn' onclick='ShowCurrentValue()'></div>";
$("#replace").append(htmll);
});
});
</script>
</head>
<body style = "font-family:Arial; font-size:10pt">
<div class="container">
<header>
<h1>Demo List</h1>
</header>
<nav>
<ul>
<li><a id="registration" href="#">Registration</a></li>
<li><a id="table" href="#">Table</a></li>
<li><a id="details" href="#">Details</a></li>
<li><a id="about" href="#">About Us</a></li>
</ul>
</nav>
<div class="panel-heading">
<h3 class="panel-title">PickList Demo</h3>
</div>
<div class="panel-body">
<div id="pickList"></div>
<br><br>
<button class="btn btn-primary" id="getSelected">Get Selected</button>
</div>
</div>
<div id="replace">
<img src="images/wallpaper.jpg"/>
</div>
<footer>Copyright © prangroup.com</footer>
</div>
</body>
</html>
它显示错误：
testWebForm.aspx：117未捕获的TypeError：$（...）。pickList在HTMLDocument中不是一个函数。 （testWebForm.aspx：117）在功能。 （Function）中的（jquery-1.3.2.min.js：19）（每个HTMLDocument的Function.ready（jquery-1.3.2.min.js：19）的）。 （jquery-1.3.2.min.js：19）（匿名）@ testWebForm.aspx：117（匿名）@ jquery-1.3.2.min.js：19每个@ jquery-1.3.2.min.js：12准备好@ jquery-1.3.2.min.js：19（匿名）@ jquery-1.3.2.min.js：19
1 个解决方案
解决方案1
0 已采纳 2017-01-25 06:56:56
您可以尝试以下一种方法：
(function($) {
$.fn.pickList = function(options) {
var opts = $.extend({}, $.fn.pickList.defaults, options);
this.fill = function() {
var option = '';
$.each(opts.data, function(key, val) {
option += '<option id=' + val.id + '>' + val.text + '</option>';
});
this.find('#pickData').append(option);
};
this.controll = function() {
var pickThis = this;
$("#pAdd").on('click', function() {
var p = pickThis.find("#pickData option:selected");
p.clone().appendTo("#pickListResult");
p.remove();
});
$("#pAddAll").on('click', function() {
var p = pickThis.find("#pickData option");
p.clone().appendTo("#pickListResult");
p.remove();
});
$("#pRemove").on('click', function() {
var p = pickThis.find("#pickListResult option:selected");
p.clone().appendTo("#pickData");
p.remove();
});
$("#pRemoveAll").on('click', function() {
var p = pickThis.find("#pickListResult option");
p.clone().appendTo("#pickData");
p.remove();
});
};
this.getValues = function() {
var objResult = [];
this.find("#pickListResult option").each(function() {
objResult.push({
id: this.id,
text: this.text
});
});
return objResult;
};
this.init = function() {
var pickListHtml =
"<div class='row'>" +
" <div class='col-sm-5'>" +
" <select class='form-control pickListSelect' id='pickData' multiple></select>" +
" </div>" +
" <div class='col-sm-2 pickListButtons'>" +
" <button id='pAdd' class='btn btn-primary btn-sm'>" + opts.add + "</button>" +
" <button id='pAddAll' class='btn btn-primary btn-sm'>" + opts.addAll + "</button>" +
" <button id='pRemove' class='btn btn-primary btn-sm'>" + opts.remove + "</button>" +
" <button id='pRemoveAll' class='btn btn-primary btn-sm'>" + opts.removeAll + "</button>" +
" </div>" +
" <div class='col-sm-5'>" +
" <select class='form-control pickListSelect' id='pickListResult' multiple></select>" +
" </div>" +
"</div>";
this.append(pickListHtml);
this.fill();
this.controll();
};
this.init();
return this;
};
$.fn.pickList.defaults = {
add: 'Add',
addAll: 'Add All',
remove: 'Remove',
removeAll: 'Remove All'
};
}(jQuery));
var val = {
01: {
id: 01,
text: 'Isis'
},
02: {
id: 02,
text: 'Sophia'
},
03: {
id: 03,
text: 'Alice'
},
04: {
id: 04,
text: 'Isabella'
},
05: {
id: 05,
text: 'Manuela'
},
06: {
id: 06,
text: 'Laura'
},
07: {
id: 07,
text: 'Luiza'
},
08: {
id: 08,
text: 'Valentina'
},
09: {
id: 09,
text: 'Giovanna'
},
10: {
id: 10,
text: 'Maria Eduarda'
},
11: {
id: 11,
text: 'Helena'
},
12: {
id: 12,
text: 'Beatriz'
},
13: {
id: 13,
text: 'Maria Luiza'
},
14: {
id: 14,
text: 'Lara'
},
15: {
id: 15,
text: 'Julia'
}
};
var pick = $("#pickList").pickList({
data: val
});
$("#getSelected").click(function() {
console.log(pick.getValues());
});
为什么jquery选项选择不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.