動態顯示/隱藏動態生成 <div> s

Question

我正在使用PHP動態生成許多<select>字段，每個字段下面都有兩個<div> 。 PHP將根據初始條件自動選擇一個選項，並且<div>由PHP自動顯示/隱藏，但是除了進行以下操作之外，如何根據<select>變化動態切換顯示/隱藏哪個<div>該div的表單字段是禁用還是啟用？

對於某些背景，我將在頁面上顯示所有可以使用的信息，但是div隱藏未使用的每個選項（使用display:none ），並且每個未使用的div都有一個禁用的表單字段。 當用戶在選擇框中選擇另一個選項時，需要隱藏當前顯示的div需要禁用div內部的select ，並且需要顯示新的div並啟用其select 。 我這樣做是因為每個隱藏/顯示的表單字段都具有與將它們發布到PHP腳本相同的名稱。

所有<div>都采用<div id="textdiv-uniqueID">或<div id="seldiv-uniqueID"> （其中uniqueID是每組div的唯一編號）的格式，並且每個select的格式為<select name="uniqueID-good_value"> ，其中uniqueID與對應的div相同。

回顧一下：我有一組動態生成的選擇框和表單字段。 每個選擇框都有兩個關聯的表單字段，每個都在自己的<div> ，其中一個將被隱藏/禁用，另一個將被顯示/啟用。 在給定選擇框中選擇另一個選項時，div和表單字段需要切換角色：需要顯示/啟用當前隱藏/禁用的選項，反之亦然。

這是一個具有基礎知識的jsFiddle ，包括我最初嘗試弄清Javascript / jQuery的嘗試。

Answer 1

通常，類似於您所需的內容如下所示：

$('#uniqueID-good_value').on('change',function (){
    var val= $(this).val();
    if(val==1) {
        $('textdiv-uniqueID').show();
        $('seldiv-uniqueID').hide();
    }else{
        $('textdiv-uniqueID').hide();
        $('seldiv-uniqueID').show();
    }
});

對於您的情況，您需要做一些邏輯上的工作，以使其與uniqueid一起智能地工作。

Answer 2

您不能只是在相關字段上放置一個“活動”或“隱藏”類，然后在情況發生變化時交換該類嗎？

例如：

$（“。active”）。removeClass（“ active”）。addClass（“ hidden”）;

您可以將其放入選擇的小部件中的事件中（我不確定所有可用的事件是什么，但是必須有onselect或onselected之類的東西，並且始終存在onmouseup）