0

比較的単純な 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 のラベル内のテキストを変更することです。したがって、フィールド 2 で「従業員」が選択されている場合、フィールド 3 のラベルには「勤務先の都市」と表示されますが、フィールド 2 で「退職者」が選択されている場合、フィールド 3 のラベルは「あなたが住んでいる都市」となります。

私が行った 1 つの解決策は、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 でこの種のデザイン パターンやベスト プラクティスはありますか? 他の人は、フォームでこの種の要件をどのように処理しましたか?

4

4 に答える 4

4

表示するラベルへの値のマップを作成します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()]);
});
于 2012-06-14T18:43:54.237 に答える
1

私はおそらくそれを少しこのように解決するでしょう（もちろん、孤立したスコープで）：

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が、読みやすくするためにそのままにしておきます。

于 2012-06-14T18:43:22.513 に答える
0

さて、私が提案するのは次のとおりです。

<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>
于 2012-06-14T18:43:20.047 に答える
0

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

これにより、ラベル リストで可能な各オプションを具体的に指定しなくても、フィールドにデフォルト値を設定できます。指定する必要があるのは、デフォルトと異なるケースのみです。

于 2012-06-14T20:09:47.797 に答える