Question

任何人都可以帮我解决以下问题。我有下面的代码从2下拉列表中选择选项。我想添加的是第二个下拉列表中选择的子类别选项，会出现一个包含附加信息的文本框。这个项目是为了'潜水'，所以我到目前为止的步骤是....选择深度.... 12米。下一个下拉菜单是选择你潜水的时间.....（比方说120分钟）。我现在需要的是一个文本框，弹出有关减压停留的信息。（我有这个信息，我只是无法弄清楚如何从第二个下拉列表中的每个选项中显示一个文本框供我添加，每个选项都会有不同的信息......

<html>
<head>
<title>Create dyanamic 3 dropdown list in javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">

function dynamicdropdown(listindex)
       {
document.getElementById("subcategory").length = 0;
           switch (listindex)
           {
 case "9" :
 document.getElementById("subcategory").options[0]=new Option("No Limit","");
                   break;

  case "12" :
  document.getElementById("subcategory").options[0]=new Option("Please select bottom time","");
  document.getElementById("subcategory").options[1]=new Option("120","120");
  document.getElementById("subcategory").options[2]=new Option("165","165");
  break;

  default:

           }
           return true;
       }

  </script>
  </head>
  <title>Dynamic Drop Down List</title>
  <body>
  <div class="category_div" id="category_div"> Depth:
  <select name="category" class="required-entry" id="category" onChange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
  <option value="">Depth</option>
  <option value="9">9</option>
  <option value="12">12</option>
  <option value="15">15</option>

  </select>
  Meters</div>
  <div class="sub_category_div" id="sub_category_div">Bottom Time:
  <script type="text/javascript" language="JavaScript">
  document.write('<select name="subcategory" id="subcategory" onchange="javascript: dynamicdropdownone(this.options[this.selectedIndex].value);"><option value="">Bottom Time</option></select>')
  </script>

Answer 1

如果我正确理解您的问题，这是一个解决您问题的代码段。 Bootstrap和jQuery使这很容易。该示例是单个列表下拉列表，但您可以按照自己的喜好复制和粘贴多个级别。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#"><input type="text"></a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#"><input type="text"></a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>


<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

＆＃13;

所以要打破片段：

要先制作下拉菜单，您需要<div class="dropdown">这是下拉菜单的容器。

在此<div>内，您将开始列表<ul class="dropdown-menu">（无序列表）。

嵌套在<ul class="dropdown-menu">内，您将嵌套<li>个元素（列出项目）。

下拉列表项

如果您希望它是普通的下拉项，您只需在<a>内添加<li>标记，这是一个链接。单击该下拉项将带您到指定的任何位置。

下拉列表中的下拉列表 如果您想要下拉列表是另一个下拉菜单，则会使用<li class="dropdown-submenu>标记。在此标记内，您将创建另一个<a>标记，并在另一个无序列表<ul class="dropdown-menu">内。

如果你想在下拉列表中有更多下拉列表，请重复上述步骤，因为你将它们嵌套在一起。

Javascript中的文本框来自下拉列表

1 个答案: