不要重复自己显示和隐藏字段的最佳实践答案

【问题标题】：Do not repeat yourself best practices showing and hiding fields不要重复自己显示和隐藏字段的最佳实践
【发布时间】：2017-07-12 21:13:09
【问题描述】：

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

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

<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/

【问题讨论】：

您可以将常见的选择/选项放在单独的 .cfm 文件中并包含它们。另一种选择是使用<cfmodule>，提供表单类型作为属性并切换模块内的相应字段。
是否可以使用 JavaScript 左右制作类似的组件？
如果您想/可以在客户端执行此操作，请查看HTML5 <template>。

标签： javascript jquery html coldfusion

【解决方案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 工作流程。

【讨论】：