从DropDown中选择选项并在另一个TextField ASP .NET MVC

Question

我想从下拉菜单中选择一个选项，并根据所选选项在第二个输入字段中自动设置值。

像这样：

我创建了javascript代码，但它无法正常工作。

$(function () {

    $("#artikel").keyup(function (e) {

        var val1 = $("#artikel").val(),
            result = "";

        if (val1.match = "Spletna aplikacija")
            result = 5;
        if (val1.match = "Namizna aplikacija")
            result = 10;
        if (val1.match = "Mobilna aplikacija")
            result = 13;
        if (val1.match = "Spletna stran")
            result = 20;

        $("#cena").val(result);
    });
});

这是我的.cshtml文件（部分）：

    <div class="form-group">
        @Html.LabelFor(model => model.artikel, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.artikel, new SelectList(new[] { String.Empty, "Spletna aplikacija - 5€", "Namizna aplikacija - 10€", "Mobilna aplikacija - 13€", "Spletna stran - 20€" } ))
            @Html.ValidationMessageFor(model => model.artikel, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.cena, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.cena, new { htmlAttributes = new { @class = "#artikel" } })
            @Html.ValidationMessageFor(model => model.cena, "", new { @class = "text-danger" })
        </div>
    </div>

我的控制器POST代码：

    public ActionResult Create()
    {
        ViewBag.zapStDoumenta_tk = new SelectList(db.dokumentGlava, "zapStDokumenta", "kodaRacuna");
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "zapStPostavke,artikel,kolicina,zapStDoumenta_tk,cena,popust,davek,znesek")] postavkaDokumenta postavkaDokumenta)
    {
        if (ModelState.IsValid)
        {
            db.postavkaDokumenta.Add(postavkaDokumenta);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.zapStDoumenta_tk = new SelectList(db.dokumentGlava, "zapStDokumenta", "kodaRacuna", postavkaDokumenta.zapStDoumenta_tk);
        return View(postavkaDokumenta);
    }

你们可以帮助我，我做错了什么？

非常感谢！

Answer 1

您的功能应如下所示

$(function () {

    $("#artikel").change(function (e) {

        var val1 = $("#artikel").val(),
            result = "";

        if (val1 == "Spletna aplikacija - 5€")
            result = 5;
        if (val1 == "Namizna aplikacija - 10€")
            result = 10;
        if (val1 == "Mobilna aplikacija - 13€")
            result = 13;
        if (val1 == "Spletna stran - 20€")
            result = 20;

        $("#cena").val(result);
    });
});

Answer 2

如下所述更改您的javascript代码。

 $(function () {

            $("#artikel").change(function () {

                var val1 = $(this).val();
                var result = "";
                switch (val1) {

                    case "Spletna aplikacija - 5€":
                        result = 5;
                        break;
                    case "Namizna aplikacija - 10€":
                        result = 10;
                        break;
                    case "Mobilna aplikacija - 13€":
                        result = 13;
                        break;
                    case "Spletna stran - 20€":
                        result = 20;
                        break;

                }              
                $("#cena").val(result);
            });
        });

Answer 3

基于你的cshtml，我试图创建一个示例html。您可以使用以下代码将选项的值与选择的当前值匹配。

$(function() {

  $("#artikel").change(function(e) {

    var val1 = $("#artikel").val(),
      result = "";

    if (val1.match("Spletna aplikacija") != null)
      result = 5;
    if (val1.match("Namizna aplikacija") !== null)
      result = 10;
    if (val1.match("Mobilna aplikacija") !== null)
      result = 13;
    if (val1.match("Spletna stran") !== null)
      result = 20;

    $("#cena").val(result);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label>Artikel</label>
  <div class="col-md-10">
    <select id="artikel">
      <option "">Select</option>
      <option "Spletna aplikacija - 5€">Spletna aplikacija - 5€</option>
      <option "Namizna aplikacija - 10€">Namizna aplikacija - 10€</option>
      <option "Mobilna aplikacija - 13€">Mobilna aplikacija - 13€</option>
      <option "Spletna stran - 20€">Spletna stran - 20€</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label>Cena</label>
  <div class="col-md-10">
    <input id="cena" value="">
  </div>
</div>