Question

我想基于几个参数制作我自己的预订表格，实际上我希望有一个下拉菜单结构，其中一个下拉菜单显示其他用户点击后。

例如：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
  <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
  <div layout="row">
    <md-select placeholder="Select" ng-model="model">
      <md-option ng-repeat="category in categories" value="{{category}}">
        {{category}}
      </md-option>
    </md-select>
  </div>
</body>

</html>

用户点击位置A后，或者B或C浏览器需要显示其他下拉菜单：

<select id="location">
  <option>Choose location</option>
  <option value="location_a">Location A</option>
  <option value="location_b">Location B</option>
  <option value="location_c">Location C</option>
</select>

买家点击酒店浏览器后需要先显示两个下拉菜单和第三个：

<select id="location_a">
  <option>Choose location</option>
  <option value="hotel_a">Hotel A</option>
  <option value="hotel_b">Hotel B</option>
  <option value="hotel_c">Hotel C</option>
</select>

<select id="location_b">
  <option>Choose location</option>
  <option value="hotel_a">Hotel A</option>
  <option value="hotel_b">Hotel B</option>
  <option value="hotel_c">Hotel C</option>
</select>

<select id="location_c">
  <option>Choose location</option>
  <option value="hotel_a">Hotel A</option>
  <option value="hotel_b">Hotel B</option>
  <option value="hotel_c">Hotel C</option>
</select>

选择微位置时，需要显示

<select id="microlocation">
  <option>Choose location</option>
  <option value="micro_a">Micro location A</option>
  <option value="micro_b">Micro location B</option>
  <option value="micro_c">Micro location C</option>
</select>

等

感谢您的帮助。

我已经尝试过搜索show / hide div jQuery，但这只适用于一个级别。

祝你好运

Answer 1

这是一种编程方式：我检查选择的值，如果不是默认值，则继续显示列表。

＆＃13;

$("#location_b, #location_c").hide();

$("select").on("change", function() {
  $("select").hide();
  if ($("#location_a").show().val() != "default") {
    if ($("#location_b").show().val() != "default") {
      $("#location_c").show();
    }
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<select id="location_a">
	  <option value="default">Choose location</option>
	  <option value="hotel_a">Hotel A</option>
	  <option value="hotel_b">Hotel B</option>
	  <option value="hotel_c">Hotel C</option>
	</select>

<select id="location_b">
	  <option value="default">Choose location</option>
	  <option value="hotel_a">Hotel A</option>
	  <option value="hotel_b">Hotel B</option>
	  <option value="hotel_c">Hotel C</option>
	</select>

<select id="location_c">
	  <option value="default">Choose location</option>
	  <option value="hotel_a">Hotel A</option>
	  <option value="hotel_b">Hotel B</option>
	  <option value="hotel_c">Hotel C</option>
	</select>

＆＃13;

单击show hide结构下拉菜单

1 个答案: