簡體   English   中英

如何創建新的下拉菜單取決於上一個下拉菜單中的選擇

[英]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 例如,帶有M3M5Model下拉列表要求為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();

.filter()

.map()

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM