如何通过Javascript创建此切换行为？

Question

首先，我真的很抱歉我无法就此问题给出具体的标题。我有一个.net 4.6.1视图页面。

我想创建此功能。

根据DepositType，DefaultDeposit应显示£符号或％。

我已经尝试过的一个逻辑是创建另一个名为DefaultDepositPercent的属性。创建一个隐藏在下面的输入框，并使用Jquery显示或隐藏此输入框。然后在我的服务层中，将DefaultDepositPercent中输入的值传递给DefaultDeposit。 但是，mvc表单也将DefaultDeposit值传递为0会带来不便。还有一个问题是有人在摆弄Javascript。

我用谷歌搜索但找不到任何答案。这可能是因为我可以用几句话来形容这个问题。

任何方向都会有所帮助。感谢

Answer 1

在bootstrap中，我们只需将span标记放在input元素的上方或下方，即可获得前缀或后缀效果。 More Details Here

所以我们首先想要的不是这个帖子/前缀span标签，而是将其添加到DOM ready事件上，或者使用Jquery insertBefore和insertAfter更改下拉选择时。这是一个工作样本。希望这有用。

＆＃13;

＆＃13;

$(function() {

  SetUpDepositTextBox();  // set up the input box once when DOM is ready

  $('.DepositType').on('change', function() {
    SetUpDepositTextBox(); // set up the text box when ever the dropdown changes
  });
});

function SetUpDepositTextBox() {
  $('#depositDefaultWrapper span').remove();
  var $this = $('.DepositType');

  if ($this.val() == "Amount") {
    $('<span class="input-group-addon">£</span>').insertBefore('#depositDefaultWrapper input');
  } else {
    $('<span class="input-group-addon">%</span>').insertAfter('#depositDefaultWrapper input');
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

 Deposit Type
<select class="DepositType form-control">
  <option value="Amount">Amount</option>
  <option value="Percentage">Percentage</option>
</select>

Default Deposit
<div id="depositDefaultWrapper" class="input-group">
  <input type="text" class="form-control" value="10">
</div>

＆＃13;

＆＃13;

＆＃13;