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选择了'Employee'时，field3标签会显示'你工作的城市'，但是当field2选择'Retiree'时，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']);
});

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

用于基于表单元素的所选值动态改变表单字段标签的技术

4 个答案: