javascript - 根据表单元素的选定值动态更改表单字段标签的技术

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()]);
});