<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--可用來建立使用者小圖示-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.newcondition_css {
padding: 10px;
margin-top: 10px;
background-color:honeydew;
}
hr {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<!--
<script>
// [系統]更新：Array / renew_system function
system_object = new Array();
system_object[0] = [" "];
system_object[1] = [" ", "清洗槽組立"];
system_object[2] = [" ", "發酵桶組立"];
system_object[3] = [" ", "乾燥桶組立"];
function renew_system(index) {
var Value="";
for(var i=0; i<system_object[index].length; i++){
Value = Value + '<option value=' + system_object[index][i] + '> ' + system_object[index][i] + '</option>';
}
var sectorSelect = document.getElementById("system");
sectorSelect.innerHTML = Value;
$('#product_index').text(index)
}
// [模組]更新：Array / renew_system function
module_object = new Array();
module_object[0] = [" "];
module_object[1] = [" ", "c1上蓋組立", "c2內桶槽組立"];
module_object[2] = [" ", "f1上蓋組立", "f2控制盒組立"];
module_object[3] = [" ", "d1上蓋組立", "d2控制盒組立"];
function renew_module(index) {
var Value="";
for(var i=0; i<module_object[index].length; i++){
Value = Value + '<option value=' + module_object[index][i] + '>' + module_object[index][i] + '</option>';
}
var sectorSelect = document.getElementById("module");
sectorSelect.innerHTML = Value;
$('#system_index').text(index)
}
// // [零件]更新：Array / renew_system function
component_object = new Array();
component_object[0] = [" "];
component_object[1][1] = [" ", "c1_M10平墊圈", "c1_M10螺帽"];
component_object[1][2] = [" ", "c2_內桶槽", "c2_內桶槽固定環"];
component_object[2][1] = [" ", "f1_吸料機入料管", "f1_入料斗擋板"];
component_object[2][2] = [" ", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];
component_object[3][1] = [" ", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];
component_object[3][2] = [" ", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];
function renew_component(product_index, index) {
var Value="";
for(var i=0; i<component_object[product_index][index].length; i++){
Value = Value + '<option value=' + component_object[product_index][index] + '>' + component_object[index][i] + '</option>';
}
var sectorSelect = document.getElementById("component");
sectorSelect.innerHTML = Value;
$('#module_index').text(index)
}
// // 輸出零件 index
function renew_item(index) {
$('#component_index').text(index)
}
</script>
-->
<br>
產品：
<!-- -->
<select id="product" onChange="renew_system(this.selectedIndex);">
</select>
系統：
<select id="system" onChange="renew_module(this.selectedIndex);">
</select>
模組：
<select id="module" onChange="renew_component(this.selectedIndex);">
</select>
零件：
<select id="component" onChange="renew_item(this.selectedIndex);">
</select>
<br>
產品：<span id="product_index"></span><br>
系統：<span id="system_index"></span><br>
模組：<span id="module_index"></span><br>
零件：<span id="component_index"></span><br>
<script>
// 資料庫中的所有 [產品]
var product_item = ['*', '清洗貨櫃', '發酵貨櫃', '乾燥貨櫃']
var inner = '';
for (let i = 0; i < product_item.length; i++) {
inner += '<option value=' + i + '>' + product_item[i] + '</option>';
}
var sectorSelect = document.getElementById("product");
sectorSelect.innerHTML = inner;
// 系統的 index
var noIndex;
// [系統]更新：Array / renew_system function
system_object = new Array();
system_object[0] = ["*"];
system_object[1] = ["*", "清洗槽組立", "CCC"];
system_object[2] = ["*", "發酵桶組立", "FFF"];
system_object[3] = ["*", "乾燥桶組立", "DDD"];
function renew_system(index) {
noIndex = index
var inner = '';
for (let i = 0; i < system_object[index].length; i++) {
inner += '<option value=' + i + '>' + system_object[index][i] + '</option>';
}
var sectorSelect = document.getElementById("system");
sectorSelect.innerHTML = inner;
}
// 模組的 index
var moIndex;
// [模組]更新：Array / renew_system function
module_object = new Array();
module_object[0] = ["*"];
module_object[1] = ["*", "清洗槽組立", "ccc"];
module_object[2] = ["*", "發酵桶組立", "fff"];
module_object[3] = ["*", "乾燥桶組立", "ddd"];
module_object[0][0] = ["*"];
module_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];
module_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];
module_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];
function renew_module(index) {
moIndex = index
console.log("renew_module START")
var inner = '';
for (let i = 0; i < module_object[noIndex][index].length; i++) {
inner += '<option value=' + i + '>' + module_object[noIndex][index][i] + '</option>';
}
console.log("module: " + inner)
var sectorSelect = document.getElementById("module");
sectorSelect.innerHTML = inner;
console.log("renew_module END")
}
// 零件
// // [零件]更新：Array / renew_system function
component_object = new Array();
component_object[0] = ["*"];
component_object[1] = ["*", "清洗槽組立", "ccc"];
component_object[2] = ["*", "發酵桶組立", "fff"];
component_object[3] = ["*", "乾燥桶組立", "ddd"];
component_object[0][0] = ["*"];
component_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];
component_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];
component_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];
component_object[0][0][0] = ["*"];
component_object[1][1][0] = ["*"];
component_object[1][1][1] = ["*", "c1_M10平墊圈", "c1_M10螺帽"];
component_object[1][1][2] = ["*", "c2_內桶槽", "c2_內桶槽固定環"];
component_object[2][1][0] = ["*"];
component_object[2][1][1] = ["*", "f1_吸料機入料管", "f1_入料斗擋板"];
component_object[2][1][2] = ["*", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];
component_object[3][1][0] = ["*"];
component_object[3][1][1] = ["*", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];
component_object[3][1][2] = ["*", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];
function renew_component(index) {
var Value="";
for(var i=0; i<component_object[noIndex][moIndex][index].length; i++){
Value = Value + '<option value=' + i + '>' + component_object[noIndex][moIndex][index][i] + '</option>';
}
var sectorSelect = document.getElementById("component");
sectorSelect.innerHTML = Value;
}
</script>
</body>
</html>