引入js和css
<!-- 加载 Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 加载 Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
写一个js在加载完DOM时就初始化select2下拉选择框
<script>
$(document).ready(function () {
var selectorx = $('#select2Id').select2({
placeholder: "Please type or choose",
placeholderOption: "first",
allowClear: true
});
});
</script>
也可以这样,两者是等价的
<script type="text/javascript" language="javascript">
var selectType;
$(function () {
selectItem = $("#select2Id");
initselectItem();
});
function initselectItem() {
selectItem .select2({
placeholder: "Please Type or Choose",
placeholderOption: "first",
allowClear: true
});
}
</script>
写一个select2
<select
class="form-control"
id="select2Id"
name="Select2"
DataSourceID="Sql_Id"
DataTextField="typeName"
DataValueField="typeValue"
runat="server">
</select>
写一个数据源用来查数据
<asp:SqlDataSource ID="Sql_Id" runat="server" ConnectionString="<%$ ConnectionStrings:xxxxxxx %>"
SelectCommand="SELECT * FROM xxxxx"></asp:SqlDataSource>
你如果用过asp.net,这里就不需要我多讲了,没用过就别看了吧,学点啥不好
C#的.cs文件获取select2选中的值和文本
// 这里的select2Id就是select2在aspx文件中的id
string select2Value = select2Id.Value;
string select2Text = select2Id.Items[select2Id.SelectedIndex].Text;