基于表单元素的选定值动态更改表单字段标签的技术

Question

我有一个比较简单的 HTML/JavaScript 表单。比如这样：

<form method='POST' action='someurl'>
    <label for='field1'>Your name</label>
    <input id='field1' name='field1' type='text' />

    <label for='field2'>Status</label>
    <select id='field2' name='field2'>
        <option>-select one-</option>
        <option value='Employee'>Employee</option>
        <option value='Retiree'>Retiree</option>
    </select>

    <label for='field3'>City you work in</label>
    <input id='field3' name='field3' type='text' />
</form>

我需要做的是根据 field2 中的选定值更改 field3 标签内的文本。因此，当 field2 选择“员工”时，field3 标签显示“您工作的城市”，但当 field2 选择“退休人员”时，field3 的标签应该是“您居住的城市”。

我所做的一个解决方案是在 field3 标签内有多个标签，然后使用一些 JavaScript 我可以切换标签内的哪些标签正在显示，如下所示：

// Form as above
<label for='field3'>
    <span id='field3EmployeeLabel' style='display:none;'>City you work in</span>
    <span id='field3RetireeLabel' style='display:none;'>City where you live</span>
</label>
<input id='field3' name='field3' type='text' />

function updateLabel() {
    if($('#field2').val()=='Employee') {
        $('#field3RetireeLabel').hide();
        $('#field3EmployeeLabel').show();
    } 
    else if($('#field2').val()=='Retiree') {
        $('#field3EmployeeLabel').hide();
        $('#field3RetireeLabel').show();
    }
    else {
        $('#field3RetireeLabel').hide();
        $('#field3EmployeeLabel').show();       
    }
}

我不喜欢这个的主要原因是这一切都必须手动编码，这只是一个简单的例子，如果field2中有7或8个不同的选项怎么办？另外，如果我必须组合多个表单字段值来确定要显示的标签怎么办？

在 HTML 中是否有此类事情的设计模式或最佳实践？其他人是如何处理表单上的此类要求的？

Answer 1

创建一个值到标签的映射以显示http://jsfiddle.net/mendesjuan/VBVtE/3/ 当您添加新选项时，只需将它们添加到标签映射。

JS

$('#field2').change(function() {
    var labels = {
        'Employee' : 'City you work in',
        'Retiree' : 'City you live in',
        '-select one-': 'Default value'
    }      
    $("label[for='field3']").html(labels[$(this).val()]);
});

Answer 2

我可能会像这样解决它（当然是在一个孤立的范围内）：

var labelEl = $( "label[ for='field3' ]" ),
    labels  = { Employee : "City in which you work",
                Retiree  : "City where you live"
              }
;

$('#field2').change( function() {
  // choose the correct label (default to the Employee label)
  var newLabel = labels[ $(this).val() ] || labels.Employee;

  labelEl.text( newLabel ); // change the label text
} );

该函数显然可以简化为单行，避免创建newLabel，但为了便于阅读，我将其保留原样。

Answer 3

好吧，我的建议如下：

<label id="label3" for="field3">
  <span id="label3_Employee">City you work in</span>
  <span id="label3_Retiree">City you live in</span>
</label>
<script type="text/javascript">
  function updateLabel() {
    $('label#label3 span').hide();
    $('label#label3 span#label3_' + $('#field2').val()).show();
  }
</script>

Answer 4

@Juan 和@Jordan 的答案的组合怎么样：（两者都很棒，谢谢！）

$('#field2').change(function() {
    var labels = {
        'Employee' : 'City you work in',
        'Retiree' : 'City you live in',
        'default': 'Default value'
    }      
    $("label[for='field3']").html(labels[$(this).val()] || labels['default']);
});

这允许该字段具有默认值，而无需在标签列表中专门指定每个可能的选项，我只需要指定与默认值不同的情况。