动态显示/隐藏动态生成 <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）