不要重复自己显示和隐藏字段的最佳做法

Question

我试图找出显示和隐藏正在重复使用的字段的最佳方法。清理代码，以便我不重复自己“干”。有人会帮助我做最好的做法吗？

我所拥有的选项允许用户从两个不同的报告中进行选择。

<select class="form-control" id="reporttype" name="reporttype"> 
    <option value="" selected="selected">Select Report</option>
    <option id ="checklistreport" value="checklistreport" >Checklist Stats</option>
    <option id ="locationreport" value="locationreport" >Location Stats</option>
</select>

然后每个报告都有很多类似的领域。如何让他们使用相同的字段，但隐藏/显示差异，并根据选择的报告转到正确的“操作”形式。

位置报告

<form name="generatereport" method="post" action="_location_queries.cfm">

<select name="Location" id="loc" multiple="multiple" required size="9">
    <option value="OPERATIONS">Operations</option>
    <option value="CCC">Contact Center</option>
    <option value="QA">QA Department</option>
    <option value="DS">DeSoto</option>
    <option value="PS">Palma Sola</option>
    <option value="LWR">Lakewood Ranch</option>
    <option value="NR">North River</option>
    <option value="SDL">SDL</option>
    <option value="FSC">FSC</option>
</select>

<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>

<textarea id="selected" rows="10" readonly></textarea>

<br /><br />

<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>

<br /><br />

<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>

<br /><br />

<label for="Format">Format</label>
<select name="Format" required>
    <option selected value="">Select Format</option>
    <option value="print">Print</option>
    <option value="pdf">Preview</option>
    <option value="xls">Excel</option>
</select>

<br /><br />

<input type="submit"  name="submit" value="Continue" />

</form> 

<script type="text/javascript">
var opts = document.querySelectorAll('#loc option');

document.getElementById('add').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = true;
    }

    reflectChange();
});

document.getElementById('rem').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = false;
    }

    reflectChange();
});

document.getElementById('loc').addEventListener('change', reflectChange);

function reflectChange() {
    document.getElementById('selected').value = '';

    for ( var i=0; i<opts.length; i++ ) {
        if(opts[i].selected)
        document.getElementById('selected').value += opts[i].text+'\n';
    }
}
</script>

核对清单报告

<form name="generatereport" method="post" action="_checklists_queries.cfm">

<select name="Location" id="loc" multiple="multiple" required size="8">
    <option value="OPERATIONS">Operations</option>
    <option value="CCC">Contact Center</option>
    <option value="QA">QA Department</option>
    <option value="DS">DeSoto</option>
    <option value="PS">Palma Sola</option>
    <option value="LWR">Lakewood Ranch</option>
    <option value="NR">North River</option>
    <option value="SDL">SDL</option>
    <option value="FSC">FSC</option>
</select>

<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>

<textarea id="selected" rows="7" readonly></textarea>

<br /><br />

        <cfquery name="GetActiveEmps" datasource="tco_associates">
           SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
           WHERE assoc_status = 'ACTIVE' 
           and assoc_last NOT LIKE 'Test%' 
           and len(assoc_last) > 0 
           ORDER BY assoc_last
        </cfquery>    

<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="8">
  <cfoutput query="GetActiveEmps">
      <option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
  </cfoutput>
</select>

<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>

<textarea id="selected1" rows="7" readonly></textarea>

<br /><br />

<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>

<br /><br />

<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>

<br /><br />

<label for="Format">Format</label>
<select name="Format" required>
    <option selected value="">Select Format</option>
    <option value="print">Print</option>
    <option value="pdf">Preview</option>
    <option value="xls">Excel</option>
</select>

<br /><br />

<input type="submit"  name="submit" value="Continue" />

</form>
<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');

document.getElementById('add').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = true;
    }

    reflectChange();
});

document.getElementById('rem').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = false;
    }

    reflectChange();
});

document.getElementById('loc').addEventListener('change', reflectChange);

function reflectChange() {
    document.getElementById('selected').value = '';

    for ( var i=0; i<opts.length; i++ ) {
        if(opts[i].selected)
        document.getElementById('selected').value += opts[i].text+'\n';
    }
}

// End JS for Showing Chosen Locations in textarea

// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');

document.getElementById('add1').addEventListener('click', function() {
    for ( var i=0; i<opts1.length; i++ ) {
        opts1[i].selected = true;
    }

    reflectChange1();
});

document.getElementById('rem1').addEventListener('click', function() {
    for ( var i=0; i<opts1.length; i++ ) {
        opts1[i].selected = false;
    }

    reflectChange1();
});

document.getElementById('EmployeeName').addEventListener('change', reflectChange1);

function reflectChange1() {
    document.getElementById('selected1').value = '';

    for ( var i=0; i<opts1.length; i++ ) {
        if(opts1[i].selected)
        document.getElementById('selected1').value += opts1[i].text+'\n';
    }
}

// End JS for Showing Chosen Associates in textarea
   </script>

这些字段中的许多字段是相同的，我可以只有一个集合并显示它们，如果选择了任一选项而没有两个不同的集合？

这就是我的尝试：

<select class="form-control" id="reporttype" name="reporttype"> 
    <option value="" selected="selected">Select Report</option>
    <option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
    <option id ="locationreports" value="locationreports" >Location Stats</option>
</select>

<script>
    $(document).on('change', '#reporttype', function() {
        var value = $(this).val();

        //var checklistreport = $("#checklistreport");
        //var locationreport = $("#locationreport");
        var location = $("#location");
        var employeelist = $("#employeelist");
        var chosendates = $("#chosendates");
        var formattype = $("#formattype");
        var submitbtn = $("#submitbtn");

        if (value == "checklistreports") {
            //checklistreport.show();
            //locationreport.hide();
            location.show();
            employeelist.show();
            chosendates.show();
            formattype.show();
            submitbtn.show();
        } else if (value == "locationreports") {
            //checklistreport.hide();
            //locationreport.show();
            location.show();
            employeelist.hide();
            chosendates.show();
            formattype.show();
            submitbtn.show();
        } else {
            //checklistreport.hide();
            //locationreport.hide();
            location.hide();
            employeelist.hide();
            chosendates.hide();
            formattype.hide();
            submitbtn.hide();
        }
    });
</script>
<br /><br />

<!--<div id="locationreport" style="display: none;">-->
<form name="generatereport" method="post" action="_location_queries.cfm">
<!--<div id="checklistreport" style="display: none;">-->
<form name="generatereport" method="post" action="_checklists_queries.cfm">




</form>

<div id="location" style="display: none;">
<select name="Location" id="loc" multiple="multiple" required size="9">
    <option value="OPERATIONS">Operations</option>
    <option value="CCC">Contact Center</option>
    <option value="QA">QA Department</option>
    <option value="DS">DeSoto</option>
    <option value="PS">Palma Sola</option>
    <option value="LWR">Lakewood Ranch</option>
    <option value="NR">North River</option>
    <option value="SDL">SDL</option>
    <option value="FSC">FSC</option>
</select>

<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>

<textarea id="selected" rows="10" readonly></textarea>
    </div>
<br /><br />

<div id="employeelist" style="display: none;">
        <cfquery name="GetActiveEmps" datasource="tco_associates">
           SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
           WHERE assoc_status = 'ACTIVE' 
           and assoc_last NOT LIKE 'Test%' 
           and len(assoc_last) > 0 
           ORDER BY assoc_last
        </cfquery>    

<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="9">
  <cfoutput query="GetActiveEmps">
      <option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
  </cfoutput>
</select>

<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>

<textarea id="selected1" rows="10" readonly></textarea>
    </div>
<br /><br />

<div id="chosendates" style="display: none;">
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>

<br /><br />

<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
    </div>
<br /><br />

<div id="formattype" style="display: none;">
<label for="Format">Format</label>
<select name="Format" required>
    <option selected value="">Select Format</option>
    <option value="print">Print</option>
    <option value="pdf">Preview</option>
    <option value="xls">Excel</option>
</select>
    </div>
<br /><br />

<div id="submitbtn" style="display: none;">
<input type="submit"  name="submit" value="Continue" />
    </div>
</form> 

<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');

document.getElementById('add').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = true;
    }

    reflectChange();
});

document.getElementById('rem').addEventListener('click', function() {
    for ( var i=0; i<opts.length; i++ ) {
        opts[i].selected = false;
    }

    reflectChange();
});

document.getElementById('loc').addEventListener('change', reflectChange);

function reflectChange() {
    document.getElementById('selected').value = '';

    for ( var i=0; i<opts.length; i++ ) {
        if(opts[i].selected)
        document.getElementById('selected').value += opts[i].text+'\n';
    }
}

// End JS for Showing Chosen Locations in textarea

// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');

document.getElementById('add1').addEventListener('click', function() {
    for ( var i=0; i<opts1.length; i++ ) {
        opts1[i].selected = true;
    }

    reflectChange1();
});

document.getElementById('rem1').addEventListener('click', function() {
    for ( var i=0; i<opts1.length; i++ ) {
        opts1[i].selected = false;
    }

    reflectChange1();
});

document.getElementById('EmployeeName').addEventListener('change', reflectChange1);

function reflectChange1() {
    document.getElementById('selected1').value = '';

    for ( var i=0; i<opts1.length; i++ ) {
        if(opts1[i].selected)
        document.getElementById('selected1').value += opts1[i].text+'\n';
    }
}

// End JS for Showing Chosen Associates in textarea
   </script> 

不确定我如何为表单选择哪个操作。取决于选择的报告。

https://jsfiddle.net/bobrierton/o2gxgz9r/10018/

Answer 1

你有几个选择：

选项＃1：

始终显示“常用”输入，并且只隐藏以选择为条件的输入，这样您的代码就更清晰了，因为您只需要管理条件元素（不是像现在这样处理所有这些元素）

选项＃2：

使用CF包含来保存“常用”元素和“条件”元素，并在必要时将它们组合在一起以构建正确的列表。

选项＃3：

使用JavaScript来保存“常用”元素和“条件”元素，并根据您的条件呈现组合列表。

var location = $('select[name=Location]');

// This lists could hold anything you want, jQuery elements
// references, strings, etc.
var lists = {
    common: ['a', 'b', 'c'],
    locationreports: ['location #1', 'location #2'],
    checklistreports: ['checklist  #1', 'checklist #2']
};

$('#reporttype').on('change', function() {
  var value = $(this).val();

  // Grab a copy of the common list to begin with
  var options = [].concat(lists.common);

  // Now combine the conditional options
  if (value === "checklistreports" || value === "locationreports") {
    options = options.concat(lists[value]);
  }

  // Now you have a complete list of options to show based
  // your conditions, so now you can just show them all, or
  // do whatever you want with this new list.

  location.empty();

  options.forEach(function($element) {
    // Do something with the list
    location.append('<option value="' + $element + '">' + $element + '</option>');
  })

还有很多其他选项，但在使用和组合包括或组合对象之间，您应该能够自定义一个很好的DRY工作流程。