我有一個HTML聯繫表單的問題。 比如我有一個元素的依賴關係模式：對什麼是在以前的步驟中選擇如何在HTML頁面中構建多個步驟選擇器？
哪裏有很多選擇和輸入依賴。
如何在HTML和Javascript（jquery）中構建該邏輯？
對於結果，我需要回到一個輸入隱藏字段，其中放置所有選定的值，例如：
現金 - 在賠償一合作伙伴 - 外里加 - Serviss從所選的選項
也許有一些爲此目的的JQuery解決方案？
P.S.我只能使用HTML頁面
最小的例子：寫出所有不同的選擇，只顯示相關的一個。您可以以類似的方式添加所有其他依賴項。動態構建選擇將更少，但更復雜的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div id="claim">
<select>
<option value="default" disabled="disabled" selected="selected">Select a claim type</option>
<option value="cash">Cash</option>
<option value="repair">Repair</option>
<option value="glazing">Glazing</option>
</select>
</div>
<div id="cash" class="hide">
<select>
<option value="partners">At Compensa partners</option>
<option value="office">Compensa Office</option>
<option value="broken">Verhicle is broken</option>
</select>
</div>
<div id="repair" class="hide">
<select>
<option value="age">Car age</option>
<option value="place">Serviss place</option>
</select>
</div>
<script>
var dependencies = {
'claim' : {
'cash' : 'nextDep',
'repair' : 'nextDep',
'glazing' : 'nextDep'
}
};
document.querySelector('#claim select').addEventListener('change', function (event) {
var parentID = event.target.parentNode.id,
value = event.target.value;
Object.keys(dependencies[parentID]).forEach(function (key) {
var select = document.querySelector('#' + key),
currentClass = select.className;
if (select.id === value && currentClass === 'hide') select.className = 'show';
else if (currentClass !== 'hide') select.className = 'hide';
});
});
</script>
</body>
</html>
你到目前爲止嘗試過什麼，它在哪裏拋出錯誤？ SO試圖修復你的代碼中的錯誤，而不是爲你寫代碼。 – Shilly
我沒有要求爲我編寫所有代碼。我只想要示例如何使用jquery或類似的東西來做到這一點。我試着用show，hide和attr（'name'）來改變，但用這種方法構建所有的依賴關係是非常困難的。 – AlexIL
您可以編寫所有不同的選項，只顯示正確的分支，或者創建一個包含所有這些分支的地圖並動態編輯幾個