ASP.NET 从下拉列表中选择选项时添加数字/文本输入模式

问题描述

所以我试图弄清楚如何从 ASP.net 的下拉列表中选择一个选项，当您选择“自定义定价”选项时，会弹出一个模式以输入文本金额，该金额成为值.所以有人选择了自定义价格选项，应该会弹出一个数字输入模式，他们输入他们的价格，它会显示在“自定义定价”所在的“价值”下方。如果有人能帮助我，那就太好了！

                <div class="inputs">
                    <label asp-for="PriceMultiplier" asp-postfix=":"></label>
                    <select name="PriceMultiplier">
                        <option value="0">Hide Pricing</option>
                        <option value="1">Net Pricing</option>
                        <option value="2">2x</option>
                        <option value="2.5">2.5x</option>
                        <option value="3">3x</option>
                        <option value="{}">Custom Pricing</option>
                    </select>
                </div>

解决方法

您可以使用 JavaScript 执行此操作。将 <script> 标记添加到您的 html 并添加此函数。还将 onchange="jsFunction(this.value);" 添加到 <select> 标签。我现在使用了 javascript promt，但是当函数被触发时你可以显示和隐藏你的模型。

function jsFunction(value) {
  if(value == 'custom'){
    var NewValue = prompt("Please enter your price");
    document.querySelector("[value='custom']").textContent = NewValue;
    document.querySelector("[value='custom']").value = NewValue;
  }
}

  <select name="PriceMultiplier" onchange="jsFunction(this.value);">
    <option value="0">Hide Pricing</option>
    <option value="1">Net Pricing</option>
    <option value="2">2x</option>
    <option value="2.5">2.5x</option>
    <option value="3">3x</option>
    <option value="custom">Custom Pricing</option>
  </select>