如何通過Javascript創建此開關行爲？

首先，我非常抱歉，我無法給出有關該問題的具體標題。我有一個.net 4.6.1的瀏覽頁面。如何通過Javascript創建此開關行爲？

我想創建此功能。

根據DepositType，DefaultDeposit應該顯示£符號或％。

其中一個邏輯，我已經嘗試過，是創建另一個名爲DefaultDepositPercent的屬性。創建一個隱藏在下面的輸入框，並使用Jquery顯示或隱藏該輸入框。然後在我的服務層中，將DefaultDepositPercent中輸入的值傳遞給DefaultDeposit。但是，mvc表單也將DefaultDeposit值作爲0傳遞給用戶帶來了一些不便。還有一個問題是有人在用Javascript來擺弄。

我已使用Google搜索，但找不到任何答案。這很可能是因爲我可以用幾句話來形容這個問題。

任何方向都會有所幫助。謝謝

來源

2016-07-12 yuvs

您使用的引導？ –

@reddy是的。英鎊和百分號由＆permil; – yuvs

在bootstrap中，我們只需將span標記放在input元素的上方或下方即可獲得前綴或後綴效果。 More Details Here

這樣的想法是先不要一開始有這個帖子/前綴span標籤，但添加它無論是在DOM就緒事件時或下拉使用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>

來源

2016-07-12 10:48:33

它的竅門。謝謝 – yuvs

@yuvs很高興我可以幫助你 –

如何通過Javascript創建此開關行爲？

回答

相關問題