![](/img/trans.png)
[英]Js, output a option dropdown list depending on previous dropdown option choice
[英]How to create new dropdown's depending on the choice in the previous dropdown
我正在嘗試制作一個jQuery,該jQuery允許根據初始下拉菜單的選擇顯示新的下拉菜單。 例:
下拉菜單1具有以下選項:汽車,飛機。 如果選擇“汽車”,則會出現一個新的下拉列表,其中包含以下選項:寶馬,奧迪,特斯拉。
如果選擇了飛機,則下一個下拉列表將改為顯示:空客,波音。
如果我在第二個下拉菜單中選擇“寶馬”(“汽車”->“寶馬”),則第三個下拉菜單將顯示M3,M5等選項(這只是您理解我的問題的示例)。 基本上,我只希望根據上一個選擇顯示新的下拉菜單。
我自己嘗試了以下操作:
HTML:
<form id="test" name="testSearch">
<select class="test1">
<option value="option">Car</option>
<option value="country">Airplane</option>
</select>
jQuery:
$('form[name="testSearch"] select').click(function () {
$('div[name=carForm]').append('<select id="carBrand">'+
'<option>BMW</option>'+
'<option>Audi</option>'+
'<option>Tesla</option>'+
但是,這不是很好,我看到可以創建帶有下拉列表的div,然后根據您在上一個下拉列表中所做的選擇使其可見。 我認為這是要走的路?
抱歉,沒有jsfiddle順便說一句。 非常感謝您的幫助。
我開始給您寫一個模糊的答案,但后來又擴展了很多,以至於我做了一個完整的示例。 我將在下面說明所有內容,並在底部鏈接一些其他文檔。
var dropdowns = [ { type: "Vehicle", options: ["Car", "Airplane"] }, { parentType: "Vehicle", parentOption: "Car", type: "Make", options: ["Audi", "BMW"] }, { parentType: "Vehicle", parentOption: "Airplane", type: "Type", options: ["737", "747"] }, { parentType: "Make", parentOption: "Audi", type: "Model", options: ["A4", "A8L"] }, { parentType: "Make", parentOption: "BMW", type: "Model", options: ["M3", "M5"] }, { parentType: "Make", type: "Color", options: ["White", "Black", "Red"] } ]; function refreshDropdowns(parentType, selection, $container) { var $newContainer = $("<div class='container' />"); if ($container) $container.append($newContainer); else $("body").append($newContainer); dropdowns .filter(i => i.parentType === parentType && (i.parentOption === selection || !i.parentOption)) .map(i => { var $newDropdown = $("<select />").data("type", i.type); var $options = i.options.map(option => $("<option>").val(option).text(option)); var $placeholderOption = $("<option>").text(`Select ${i.type}...`); $newDropdown .append($placeholderOption) .append($options); return $newDropdown; }) .forEach($i => { if ($container) $newContainer.append($i) else { var $rootContainer = $("<div class='container' />"); $rootContainer.appendTo($newContainer).append($i); } }); } $(document).on("change", "select", function() { var $container = $(this).closest(".container"); var type = $(this).data("type"); var selection = $(this).val(); $container.find(".container").remove(); refreshDropdowns(type, selection, $container); }); refreshDropdowns();
select { display: block; width: 150px; padding: 8px 4px; margin: 5px 0; border-radius: 5px; } .root-container { padding: 10px; margin: 10px; border: 1px solid #ccc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1.為下拉菜單創建結構/列表
在我的示例中,每個對象都有一個type
,一個可選的parentType
(假定沒有parentType的任何內容始終可見)和一個可選的特定parentOption
。 例如,帶有M3
和M5
的Model
下拉列表要求為Make
選擇“ BMW”。 如果您查看對象,這應該更有意義。
這是非常有益的,因為現在您可以從此處控制所有內容,而不是每次要更新時都深入研究代碼。
var dropdowns = [
{
type: "Vehicle",
options: ["Car", "Airplane"]
},
{
parentType: "Vehicle",
parentOption: "Car",
type: "Make",
options: ["Audi", "BMW"]
},
{
parentType: "Vehicle",
parentOption: "Airplane",
type: "Type",
options: ["737", "747"]
},
{
parentType: "Make",
parentOption: "Audi",
type: "Model",
options: ["A4", "A8L"]
},
{
parentType: "Make",
parentOption: "BMW",
type: "Model",
options: ["M3", "M5"]
},
{
parentType: "Make",
type: "Color",
options: ["White", "Black", "Red"]
}
];
2.使用該結構來確定選擇更改時要添加/刪除的下拉菜單
function refreshDropdowns(parentType, selection, $container) {
//All our new dropdowns should go in a container together.
//This makes it easier to remove all children later on.
var $newContainer = $("<div class='container' />");
if ($container)
$container.append($newContainer);
else
$("body").append($newContainer);
//From our dropdown list, find any that depend on this dropdown and/or option
dropdowns
.filter(i => i.parentType === parentType && (i.parentOption === selection || !i.parentOption))
//Now that we know which dropdowns we need to create, let's create the actual
//<select> and <option> elements
.map(i => {
var $newDropdown = $("<select />").data("type", i.type);
var $options = i.options.map(option => $("<option>").val(option).text(option));
var $placeholderOption = $("<option>").text(`Select ${i.type}...`);
$newDropdown
.append($placeholderOption)
.append($options);
return $newDropdown;
})
//Add them all to the container. For root-level dropdowns, we'll need separate containers.
.forEach($i => {
if ($container) $newContainer.append($i)
else {
var $rootContainer = $("<div class='container' />");
$rootContainer.appendTo($newContainer).append($i);
}
});
}
3.下拉菜單更改時調用我們的函數
//We use event delegation here to trigger events for dynamic elements
$(document).on("change", "select", function() {
var $container = $(this).closest(".container");
var type = $(this).data("type");
var selection = $(this).val();
//Remove any dropdowns that depend on this one
$container.find(".container").remove();
refreshDropdowns(type, selection, $container);
});
4.在頁面加載一次調用我們的函數只是為了創建root / parentless下拉列表
refreshDropdowns();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.