如何使用下拉菜单更改数据输入掩码前缀

Question

我使用 Robin Herbot inputmask plugin 进行货币输入。我想在每次交换下拉更改事件触发时更改货币符号。但是 inputmask 前缀阻止更改货币符号。我有这个代码：

HTML:

 @Html.DropDownListFor(model => model.exchange, 
               new SelectList(@ViewBag.rates, "Value", "Text",4), null, new
                       {
                           @Style = "height:34px;width:370px !important;font-size: 14px;",
                           @class = "form-control input-lg"
                       }
              )
 <input type="text"
                       class="form-control text-left monerate"
                       id="price1"
                       name="price1"
                       placeholder="₺ 0.00"
                       data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '₺ ', 'placeholder': '0'" />

JQuery:

  $('input.monerate').inputmask();

  $(document.body).delegate('#exchange', 'change', function () {  
        exchangeID = $('#exchange :selected').val();
        if (exchangeID == 1) {
            $("#price1").inputmask({ alias: "currency", prefix: '$ ' });           
        }
        else if (exchangeID == 2) {           
            $("#price1").inputmask({ alias: "currency", prefix: '€ ' });
        }
        else if (exchangeID == 3) {            
            $("#price1").inputmask({ alias: "currency", prefix: '£ ' });
        }
        else if (exchangeID == 4) {
            $("#price1").inputmask({ alias: "currency", prefix: '₺ ' });
        }        
    });

有没有办法更改前缀？

我读过这个答案，但对我不起作用：

Fiddle: https://jsfiddle.net/6kzjLd7u/10/

Answer 1

您需要像下面这样使用您的 on-change 函数。此外，默认情况下 select 的 value 是 string 但您正在将 value 检查为 integer，这是您的代码不起作用的原因之一。

Add treat the option as integar 我们可以使用 unary operator (+) - 在获取值之前添加一个加号将使它成为 integar

var exchangeID = +$(this).val(); //parse as number - by default it is string

其次，对于 Robin Herbot inputMask 动态加载并从 dropdown 更改 currency 前缀，您需要分配 [= jQuery 中的 22=] 前缀也是如此。由于您在 中静态地 中定义了 HTML 它将不会按预期工作。

最后，您的代码已全部修复并按预期工作，货币 prefix 在 selection 上发生变化。

现场工作演示：

//by default on page load
$("#price1").inputmask({
  alias: "currency",
  prefix: '₺ '
});

//apply prefix on select option change
$(document).on('change', '#exchange', function() {
  var exchangeID = +$(this).val(); //parse as number not - by default is string
  if (exchangeID == 1) {
    $("#price1").inputmask({
      alias: "currency",
      prefix: '$ '
    });
  } else if (exchangeID == 2) {
    $("#price1").inputmask({
      alias: "currency",
      prefix: '€ '
    });
  } else if (exchangeID == 3) {
    $("#price1").inputmask({
      alias: "currency",
      prefix: '£ '
    });
  } else if (exchangeID == 4) {
    $("#price1").inputmask({
      alias: "currency",
      prefix: '₺ '
    });
  }
});

input.monerate {
  text-align: left !important;
  width: 300px;
}

select {
  width: 300px !important;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<div style="margin:10px;">
  <label for="exchange">Choose a currency:</label>

  <select name="exchange" id="exchange" class="form-control">
    <option selected disabled>Choose</option>
    <option value="1">USD</option>
    <option value="2">Euro</option>
    <option value="3">Pound</option>
    <option value="4">TL</option>
  </select>
</div>

<div style="margin:10px;">
  <label>Price:</label>
   <input type="text" class="form-control text-left monerate" id="price1" name="price1" placeholder="₺ 0.00" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0'" />
</div>

如何使用下拉菜单更改数据输入掩码前缀

How to change data-inputmask prefix using dropdown

jquery

jquery-inputmask