首頁猿問如何修改此 jQuery...

如何修改此 jQuery 以在下拉列表中動態(tài)顯示和隱藏相關(guān)選擇選項？

JavaScript

交互式愛情 2022-12-22 12:57:25

在此示例中，我有一系列 3 個選擇下拉菜單。相同的類（“group-1”）應(yīng)用于每個以指示它們是相關(guān)的（并允許在同一頁面上選擇多個組）。“data-parent”屬性應(yīng)用于 select 以建立 1:1 的父/子關(guān)系?！癲ata-parent”屬性應(yīng)用于建立多對多關(guān)系的選項。我的目標(biāo)是創(chuàng)建一段動態(tài) jQuery 代碼，這樣我就不必通過 id 或類顯式標(biāo)識行為，而是通過選項值和數(shù)據(jù)父值。我的問題：第三個下拉列表根本不更新。我認(rèn)為它們中的一些可能具有多個數(shù)據(jù)父值（由空格分隔），但即使我將它們更改為全部只有一個，它仍然不會隨著對第二個下拉列表的更改而更新.我不確定如何在第三個下拉列表的選項中實現(xiàn)“許多”數(shù)據(jù)父值。拆分字符串，創(chuàng)建數(shù)組，查看數(shù)組中是否有值？如何通過更改父下拉菜單將第二個和第三個下拉菜單重置為“默認(rèn)”值？例如，如果我從第一個中選擇“Cookies”，則第二個中會出現(xiàn)“1 dozen”和“2 dozen”。但是，如果我選擇“一打”，然后將第一個框更改為“蛋糕”，則“一打”仍然處于選中狀態(tài)，即使“片材”和“圓形”是下拉列表中唯一可用的選項。我想讓它重置為默認(rèn)值（“Desserts...”）。代碼在下面，這是我的工作 jsfiddle：https ://jsfiddle.net/rwh4z623/20/

查看完整描述

2 回答

慕無忌1623718

TA貢獻1744條經(jīng)驗獲得超4個贊

我不知道這段代碼的上下文，所以我不知道這種“嵌套”選項和選擇模式是否是最佳解決方案。但這是我的 javascript 版本，它似乎實現(xiàn)了問題中的要求。我會評論相關(guān)的變化，這樣我的思維過程就很清楚了。我還為隱藏類添加了 css，因為它不在 jsfiddle 中。

$(document).ready(function () {

$("select").on('change', function () {

var selClass = $(this).attr("class");

var selName = $(this).attr("name");

var selVal = $(this).children("option:selected").val();

//Call the update function with the data of the changed Select

updateRecursivly(selClass, selName, selVal);

//Recursive function to update all selects, this allows for multiple "child" selects per select and an in theory infinite "tree" of selects

function updateRecursivly(selClass, selName, selVal) {

//Search "children" of the parent select

var children = $("select." + selClass + "[data-parent='" + selName + "']");

if (children.length) {

children.each(function () {

//Hide all options in the "child" select

$(this).children("option[data-parent]").hide();

//if selVal is an empty string, the default option is selected and we should just hide the "child" select

if (selVal !== "") {

//Get all options that contain (*=) selVal in "data-parent"

var options = $(this).children("option[data-parent*='" + selVal + "']");

//If there are possible options show the select and the possible options. Else hide select

if (options.length) {

$(this).removeClass('hide');

options.show();

} else {

$(this).addClass('hide');

}

} else {

$(this).addClass('hide');

}

//If the select is updated, the options should be reset. Any selected is reset and the first is selected

//From here https://stackoverflow.com/a/16598989/14040328 this is apparently safer against reset events than other solutions

$(this).children("option:selected").prop("selected", false);

$(this).children("option:first").prop("selected", "selected");

//Get the name of the select

var childName = $(this).attr("name");

//Update the Child select

updateRecursivly(selClass, childName, "");

});

}

});

.hide {

display: none;

}

我不確定我是否過度評論了，如果有任何不清楚的地方，請隨時發(fā)表評論。

反對回復(fù) 2022-12-22

偶然的你

TA貢獻1841條經(jīng)驗獲得超3個贊

您可以使用attributeContainsWord (~)將多個值與一個詞匹配。因此，在下面的代碼中，我使用$(this).children("option[data-parent~='" + selVal + "']").show();顯示與匹配的選項selVal。另外，我使用 prop('selectedIndex', 0);將選擇重置為默認(rèn)值。

演示代碼：

$(document).ready(function() {

$(".hide").children("option").hide();

$("select").on('change', function() {

//checking if dropdown is categories

if ($(this).attr("name") == "categories") {

//reset other to default

$('select[name=desserts]').prop('selectedIndex', 0);

$('select[name=flavors]').prop('selectedIndex', 0);

}

var selClass = $(this).attr("class");

var selName = $(this).attr("name");

var selVal = $(this).children("option:selected").val();

//check if name != desserts

if ($(this).attr("name") != "desserts") {

//hide option of flavour

$("select[name=flavors]").children("option").hide();

//loop and show desire values

$("select." + selClass + "[data-parent='" + selName + "']").each(function() {

$(this).children("option[data-parent='" + selVal + "']").show();

$(this).children("option[data-parent!='" + selVal + "']").hide();

});

} else {

//hide options

$("select[name=flavors]").children("option").hide();

//loop through flavours

$("select[name=flavors]").each(function() {

//use " ~ " to see if the selval matches with values

$(this).children("option[data-parent~='" + selVal + "']").show();

});

}

});

<option value="" selected="selected">Please select...</option>

<option value="cookie">Cookies</option>

<option value="cake">Cakes</option>

<option value="icecream">Ice Cream</option>

</select>

<option value="" selected="selected">Desserts...</option>

<option value="1-dozen" data-parent="cookie">1 dozen</option>

<option value="2-dozen" data-parent="cookie">2 dozen</option>

<option value="sheet" data-parent="cake">Sheet</option>

<option value="round" data-parent="cake">Round</option>

</select>

<option value="" selected="selected">Flavors...</option>

<option value="choc-chip" data-parent="1-dozen 2-dozen">Chocolate Chip</option>

<option value="oatmeal" data-parent="1-dozen 2-dozen">Oatmeal</option>

<option value="yellow" data-parent="sheet round">Yellow</option>

<option value="red-velvet" data-parent="sheet">Red Velvet</option>

</select>

反對回復(fù) 2022-12-22

2 回答
0 關(guān)注
134 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何修改此 jQuery 以在下拉列表中動態(tài)顯示和隱藏相關(guān)選擇選項？

如何修改此 jQuery 以在下拉列表中動態(tài)顯示和隱藏相關(guān)選擇選項？

2 回答

添加回答

如何修改此 jQuery 以在下拉列表中動態(tài)顯示和隱藏相關(guān)選擇選項？