javascript - 如何通过JavaScript创建此开关行为？

首先，非常抱歉，我无法提供有关此问题的特定标题。我有一个.net 4.6.1视图页面。



我要创建此功能。

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

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

我已经用谷歌搜索，但是找不到任何答案。这很可能是因为我可以用几句话来描述这个问题。

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

最佳答案

在引导程序中，我们只需将span标记放在input元素上方或下方，即可获得Prefix或Postfix效果。 More Details Here

因此，首先想到的是首先不具有此post / prefix span标记，而是在DOM ready事件中或使用Jquery insertBefore和insertAfter更改下拉选择时将其添加。这是一个工作示例。希望这会有所帮助。

$(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');
  }
}

<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>

关于javascript - 如何通过JavaScript创建此开关行为？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38326038/