快捷導(dǎo)航

基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果功能實(shí)現(xiàn)

更新時(shí)間：2023年02月03日 10:01:39 作者：Riu_Peter

這篇文章主要介紹了基于?jquery-cxselect?實(shí)現(xiàn)下拉聯(lián)動(dòng)效果,下拉聯(lián)動(dòng)是基于query的一款聯(lián)動(dòng)下拉菜單插件 jquery-cxselect實(shí)現(xiàn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

寫(xiě)在前面

下拉聯(lián)動(dòng)效果是一個(gè)老生常談的問(wèn)題了，實(shí)現(xiàn)方式也是多種多樣。最近遇到類(lèi)似的需求，這里整理一下。
下拉聯(lián)動(dòng)實(shí)現(xiàn)基于jquery的一款聯(lián)動(dòng)下拉菜單插件 jquery-cxselect

功能實(shí)現(xiàn)

1、導(dǎo)入腳本

<!-- jQueyr 腳本 -->
<script src="/js/jquery.min.js?v=3.6.3"></script>
<!-- jQueyr 下拉插件腳本 -->
<script src="/jsjquery.cxselect.min.js?v=1.4.2"></script>

2、編寫(xiě)頁(yè)面組件

頁(yè)面組件布局使用的是 BootStrap。

注意：div 組件的 id 屬性，后面腳本會(huì)用到

<div class="form-group" id="pca">
    <label class="col-sm-2 control-label is-required">省市縣：</label>
    <div class="col-sm-3">
        <!-- data-value 可以設(shè)置下拉框的默認(rèn)選擇值 -->
        <select name="province" class="province form-control m-b" required data-value=""></select>
    </div>
    <div class="col-sm-3">
        <select name="city" class="city form-control m-b" required data-value=""></select>
    </div>
    <div class="col-sm-3">
        <select name="area" class="area form-control m-b" required data-value=""></select>
    </div>
    <div class="col-sm-3 col-sm-offset-2">
        <select name="street" class="street form-control m-b" required data-value=""></select>
    </div>
</div>

3、JSON 數(shù)據(jù)準(zhǔn)備

這里準(zhǔn)備了一個(gè)JSON文件，點(diǎn)擊連接直接下載放到項(xiàng)目中即可。下面羅列一部分摘要。

[
	{
		"code": "11",
		"name": "北京市",
		"children" : [
			{
				"code" : "1101",
				"name" : "市轄區(qū)",
				"children" : [
					{
						"code" : "110101",
						"name" : "東城區(qū)" ,
						"children" : [
							{
								"code" : "110101001",
								"name" : "東華門(mén)街道" 
							},
							{
								"code" : "110101002",
								"name" : "景山街道" 
							},
						]
					}
				]
			}
		] 
	}
]

4、腳本編寫(xiě)

<script th:inline="javascript">
    /* 讀取 json 文件，轉(zhuǎn)換為 JSON 數(shù)組，方便遍歷 */
    $.getJSON('/pcas-code.json', function(data){
        // 基于 ID 選擇器，選擇級(jí)聯(lián)組件的父容器，調(diào)用插件的 cxSelect 方法，傳遞參數(shù)。
        $('#pca').cxSelect({
            // 選擇聯(lián)動(dòng)組件，以 class 選擇器選擇
            selects: ['province', 'city', 'area', 'street'],
            // 是否為必選
            required: false,
            // 從 JSON 數(shù)據(jù)中獲取指定 key 的值，給 option 標(biāo)簽的 value 賦值
            jsonValue: 'code',
            // 從 JSON 數(shù)據(jù)中獲取指定 key 的值，給 option 選項(xiàng)賦值
            jsonName: 'name',
            // 從 JSON 數(shù)據(jù)中獲取指定 key 的值，獲取聯(lián)動(dòng)的子數(shù)據(jù)
            jsonSub: 'children',
            data: data,
        });
    });
</script>

補(bǔ)充：Jquery cxSelect多級(jí)聯(lián)動(dòng)下拉組件的使用

Jquery cxSelect多級(jí)聯(lián)動(dòng)下拉組件的使用

雖然，現(xiàn)在的項(xiàng)目大都不直接使用jquery進(jìn)行開(kāi)發(fā)了。但是身為后端的我依然遇到了，單體項(xiàng)目，themeleaf模板全棧開(kāi)發(fā)

下面記錄一下如何使用（文檔這些對(duì)我們這些后端來(lái)說(shuō)不是很友好）

1.首先頁(yè)面中要引入它的js（我這里是themeleaf）

<th:block th:include="include :: jquery-cxselect-js" />

js直接：

<script src="jquery.js"></script>
<script src="jquery.cxselect.js"></script>

2.級(jí)聯(lián)的select們必須用一個(gè)dom（id可以隨意?。┌饋?lái)，必須要有class屬性

<!--
select 必須放在元素 id="element_id" 的內(nèi)部，不限層級(jí)
select 的 class 任意取值，也可以附加多個(gè) class，如 class="province otherclass"，在調(diào)用時(shí)只需要輸入其中一個(gè)即可，但是不能重復(fù)
-->
<div id="element_id">
  <select class="curriculum"></select>
  <select class="chapter"></select>
</div>

3.發(fā)請(qǐng)求獲取數(shù)據(jù)，數(shù)據(jù)是json（級(jí)聯(lián)下拉數(shù)據(jù)類(lèi)似于多層循環(huán)，java中就是對(duì)象套list，list里面的對(duì)象再套list），$(’#element_id’)對(duì)應(yīng)最外層的id屬性值

// 通過(guò)默認(rèn)url獲取
var urlSelect = 'selectdata';
//設(shè)置請(qǐng)求路徑
$.cxSelect.defaults.url = urlSelect;
$('#element_id').cxSelect({
    selects: ['curriculum', 'chapter'],
    nodata: 'none',
    jsonSub: 'chapterList'
});

selects數(shù)組中的數(shù)據(jù)，就是select下拉框的class屬性的值，順序很重要，比如數(shù)組第一個(gè)值就對(duì)應(yīng)第一個(gè)下拉框

? jsonSub：子select的list數(shù)據(jù)字段（這里是統(tǒng)一指定，即設(shè)置后每一個(gè)子級(jí)的數(shù)據(jù)字段都叫這個(gè)名字），不指定該屬性，它默認(rèn)會(huì)去找“s”這個(gè)字段

4.需要注意的是，下拉框我們希望瀏覽name，選擇id

<select class="curriculum" name="curriculumId" data-json-name="name" data-json-sub="chapterList" data-json-value="id" data-first-title="所屬課程">
                        <option value="">請(qǐng)選擇</option>
                    </select>

data-json-name：指定下拉時(shí)展示的數(shù)據(jù)字段，默認(rèn)找“n”這個(gè)字段

? data-json-value：指定選中時(shí)取哪個(gè)字段作為值

? data-json-sub：如果返回的Json數(shù)據(jù)的子級(jí)下拉數(shù)據(jù)字段不完全同名，可以單獨(dú)為每一個(gè)下拉框指定子級(jí)list字段名

到此這篇關(guān)于基于 jquery-cxselect 實(shí)現(xiàn)下拉聯(lián)動(dòng)效果的文章就介紹到這了,更多相關(guān)jquery-cxselect 下拉聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: