Question

我有一些文本框和一个选择标记，如下所示：

<select id="calcOption" name="calcOption">
    <option value="PMT" id="PMT" name="PMT">Payment (PMT)</option>
    <option value="I" id="I" name="I">Interest (I)</option>
    <option value="FV" id="FV" name="FV">Future value (FV)</option>
    <option value="PV" id="PV" name="PV">Present value (PV)</option>
</select>
@Html.Label("Present value (PV)", new { id = "pvLabel" })
@Html.TextBox("PresentValue")
@Html.Label("Future value", new { id = "fvLabel" })
@Html.TextBox("FutureValue")
@Html.Label("Interest rate", new { id = "intRateLabel" })
@Html.TextBox("InterestRate")

根据select标签中选择的值，我希望ID和标签改变如下：

$(document).on('change', '#calcOption', function () {
var selected = $('#calcOption option:selected').attr('id');
switch (selected) {
    case 'I':
        $('#intRateLabel').text("Payment (PMT)");
        $('#fvLabel').text("Future value (FV)");
        $('#pvLabel').text("Present value (PV)");
        $('#InterestRate').attr({ id: 'PMT', name: 'PMT' });
        break;
    case 'PV':
        $('#intRateLabel').text("Interest rate");
        $('#pvLabel').text("Payment (PMT)");
        $('#fvLabel').text("Future value (FV)");
        $('#PresentValue').attr({ id: 'PMT', name: 'PMT' });
        break;
    case 'FV':
        $('#intRateLabel').text("Interest rate");
        $('#fvLabel').text("Payment (PMT)");
        $('#pvLabel').text("Present value (PV)");
        $('#FutureValue').attr({ id: 'PMT', name: 'PMT' });
        break;
    case 'PMT':
        $('#intRateLabel').text("Interest rate");
        $('#fvLabel').text("Future value (FV)");
        $('#pvLabel').text("Present value (PV)");
        $('#InterestRate').attr({ id: 'InterestRate', name: 'InterestRate' });
        break;
}
});

我遇到的问题是当我在值之间切换时，他们不会改变回来。因此，如果我获取值I，那么ID InterestRate将更改为PMT。但是如果我换成像PV这样的另一个值，我想让ID InterestRate回到PMT所在的位置。因此，如果我在select标签中点击，则所有ID都将是PMT，我需要刷新页面以获取所有ID。但我希望他们在改变价值时改回来。我该怎么做？

Answer 1

首先你需要为这个sintaxe设置id属性：

@Html.Label("Interest rate", new { @id = "intRateLabel" })

现在。我建议你将atribute操作改为class而不是每个元素的id

@Html.TextBox("InterestRate", new{ @class = "payment" })

将您的代码修改为：

$(document).on('change', '#calcOption', function () {
var selected = $('#calcOption option:selected').attr('id');
switch (selected) {
    case 'I':        
        $('.payment').attr({ id: 'PMT', name: 'PMT' });

根据选择值MVC动态更改文本框上的ID

1 个答案: