根據「選擇」元素修改頁面內容

Question

我目前有一個頁面，允許用戶通過選擇（「調查問題」）輸入不同類型的數據庫條目，即多項選擇，文本，下拉式等等。每個至少包含textarea和2 input type="text"。 現在這是通過在HTML中有4個div來完成的，其中3個通過CSS隱藏（「display：none」）。然後在select更改中發生JS操作，該更改使用switch語句正確隱藏和取消隱藏所有div。 Form.onsubmit會刪除除當前所選div之外的所有div，因爲它們全都使用相同的name s作爲其input s。
顯然這是非常低效和醜陋的。我認爲正確的方法是使用JS創建元素，我吸取的東西，然後當用戶改變選擇，從窗體中刪除子div和添加所需的形式div。但是，我不知道該怎麼做。
我將不勝感激，如果有人能告訴我如何去做我的建議，或展示如何做得更好。

謝謝。

Answer 1

其實你的方法聽起來不太糟糕。我所說的兩件事之一就是將它們命名爲同一件事 - 如果它們確實代表了相同的數據，爲什麼不實際爲所有4個部分使用相同的表單元素？

我想要改進的另一件事是當表單提交時需要從DOM中刪除任何東西。這不僅增加了提交過程的複雜性，而且還可以防止用戶點擊後退按鈕重試。

每當價值發生變化時，我都不會創建/銷燬元素 - 這不僅會降低效率，而且會使維護更加困難，更容易受到bug的干擾，並會將用戶輸入的任何信息都刪除。

我認爲有可能改善這個給你兩個主要選項：

1）保持相同的字段

如果4種確實有3個共同領域的每一個，爲什麼不你可以在一個永遠不會隱藏的部分中擁有這些部分，並且只有在特殊部分中的每種類型都具有唯一性的信息時，可以在SELECT元素的值發生變化時顯示或隱藏。

2）禁用隱藏

字段被禁用根本不發送到服務器領域。因此，只要確保只有一個未被禁用，您可以在多個元素上保留相同的名稱，而不必在提交前刪除它們。我使用了toggleDisabled方法，該方法將採用一個元素並迭代遍歷所有子元素和所有子元素，並禁用或啓用input/select/textarea元素。然後我可以傳入一個元素並啓用/禁用所有表單元素。它可以完美地用於你正在嘗試做的事 - 你會隱藏你的DIV，然後你會禁用它。然後您將顯示並啓用選定的一個。