Javascript経由でこのスイッチ動作を作成するにはどうすればよいですか？

Question

まず、問題について具体的なタイトルを付けることができなかったことを本当に申し訳なく思っています。私は.net 4.6.1ビューページを持っています。

私は、この機能を作成します。

DefaultDepositは、DepositTypeに応じて、£記号または％を表示する必要があります。

私はすでに、DefaultDepositPercentという別のプロパティを作成していました。下に隠れる入力ボックスを作成し、この入力ボックスを表示または非表示にするにはJqueryを使用します。次に、私のサービス層で、DefaultDepositPercentに入力された値をDefaultDepositに渡します。 しかし、mvc形式でもDefaultDepositの値が0になってしまうという不都合がありました。また、Javascriptを使っている人の問題もあります。

私はグーグルでも答えは見つかりませんでした。それは、私が問題を少数の言葉で説明できるからだろう。

いずれの方向にも役立ちます。ありがとう

Answer 1

ブートストラップでは、spanタグをinput要素の上または下に置くだけで、接頭辞または接尾辞の効果を得ることができます。

More Details Hereだからアイデアは、最初にこのポスト/プレフィックス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>