使用jQuery更改选择表单时更改标签的值

时间:2014-03-20 12:35:57

标签: jquery drop-down-menu

我想要做的是在下拉选择表单中进行更改时能够更改标签的值。

<select form="FormCalcInput" id="calcOption" title="Choose what value you want to count> 
    <option value="PMT" class="PMT">Payment (PMT)</option>
    <option value="I" class="I">Interest (I)</option>
    <option value="FV" class="FV">Future value (FV)</option>
    <option value="PV" class="PV">Present value (PV)</option>
</select>

<label id="labelChanged"></label>

因此标签应该是之前选择的值。

感谢。

7 个答案:

答案 0 :(得分:1)

如果您想要选择上一个,则需要一个全局变量:

var newLabel = '';
$('#calcOption').on('change', function(){
    $('#labelChanged').text(newLabel); //Change the text before changing the value
    switch(this.value){
        case 'I':
            newLabel = 'Interest';
            break;
        case 'FV':
            newLabel = 'Future value';
            break;
        case 'PV':
            newLabel = 'Present value';
            break;
        case 'PMT':
            newLabel = 'Payment';
            break;
    }
}).trigger('change');

答案 1 :(得分:1)

$(document).ready(function(){
    var previous = $('#calcOption').val();
    $('#calcOption').change(function(){
        var val = $(this).val();

        $('#labelChanged').html(previous);
        previous = val;
    });
});

更新了

答案 2 :(得分:1)

我猜它应该是这样的。

$('#calcOption').on('change', function() {
    var prev = $(this).data('prev') || $('option:first', this).text();

    $('#labelChanged').text(prev);
    $(this).data('prev', $('option:selected', this).text());
});

FIDDLE

这将保存先前选择的值并将其设置为标签文本

答案 3 :(得分:0)

我不确定这是否是您要找的,但这会将标签设置为所选选项中的文字

$('#calcOption').on('change', function(){
    var v = $(this).find(':selected').text();
    $('#labelChanged').text( v );
});

http://jsfiddle.net/zQ77t/

答案 4 :(得分:0)

试试这个

<select form="FormCalcInput" id="calcOption" title="Choose what value you want to count" onChange="changelabel(this.value)"> 
<option value="PMT" class="PMT">Payment (PMT)</option>
<option value="I" class="I">Interest (I)</option>
<option value="FV" class="FV">Future value (FV)</option>
<option value="PV" class="PV">Present value (PV)</option>
</select>

<label id="labelChanged"></label>

在javascript中

var labelname;
function changelabel(var value){
     switch(value){
         case 'I': 
         case 'FV':
             labelname  = 'Payments';
             break;
         case 'PMT':
     }
  $('#labelChanged').html(labelname);
}

答案 5 :(得分:0)

请试试这个:

function TestFunction() {

                var name = $("#calcOption option:selected").text();

                if (name == "Interest (I)") {
                    $("#labelChanged").val("");
                    $("#labelChanged").text("Payment");
                }
                else if (name == "Interest (I)") {
                  //set other value
                }
            }

答案 6 :(得分:0)

您可以在dropDown的更改事件中调用此类代码

Var ddlSelectedValue = $('#calcOption').text();
$('#labelChanged').text(ddlSelectedValue );