asp.net MVC - 复选框下拉列表不会在 ASP MVC 中保持关闭 - asp.net mvc - Checkbox dropdown won't stay down in ASP MVC 小贝子编程网

我发现了如何在不使用自定义Javascript（而不是引导程序库）的情况下制作复选框下拉按钮。没有用于处理表单数据的Javascript。：

http://plnkr.co/edit/NOM0UK2io6LaiJE5aSbs?p=preview

我已经在ASP-MVC视图中实现了这一点，但行为id不同。在ASP-MVC版本中，每次选中复选框后都会弹出下拉列表。这很烦人。

ASP-MVC代码只是containerdiv及其内容。这是一个活生生的例子，只要它保持不变。

HTML+引导程序：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <form action="http://yahoo.com" method="get" target="_blank">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Checkboxes
        <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><input type="checkbox" name="cx1">cx1</li>
          <li role="presentation"><input type="checkbox" name="cx2">cx2</li>
          <li role="presentation"><input type="checkbox" name="cx3">cx3</li>
          <li role="presentation"><input type="checkbox" name="cx4">cx4</li>
        </ul>
      </div>
      <input type="submit" value="submit" class="btn btn-default">
    </form>
  </div>
</body>
</html>

Index.cshtml

@{
    ViewBag.Title = "View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
    <form action="http://yahoo.com" method="get" target="_blank">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
                Checkboxes
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                <li role="presentation"><input type="checkbox" name="cx1" data-stoppropagation="true">cx1</li>
                <li role="presentation"><input type="checkbox" name="cx2" data-stoppropagation="true">cx2</li>
                <li role="presentation"><input type="checkbox" name="cx3" data-stoppropagation="true">cx3</li>
                <li role="presentation"><input type="checkbox" name="cx4" data-stoppropagation="true">cx4</li>
            </ul>
        </div>
        <input type="submit" value="submit" class="btn btn-default">
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function (e) {
            e.stopPropagation();
        });
    });
</script>

@section Scripts{
    <script type="text/javascript">
    $(function () {
        $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function (e) {
            e.stopPropagation();
        });
    });
    </script>
}

EDIT:有问题的Javascript

$(document).ready(function () {
    getSpeciesList();
});
var current_path = window.location.pathname;
var current_controller = current_path.split('/')[1];
var species_select_url = "/" + current_controller + "/fillSpeciesSelect";
function getSpeciesList() {
    console.log("in get species list");
    $.ajax({
        type: "GET",
        url: url, // the method we are calling
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "",
        success: function (result) {
            //alert("successfully got species list");
            //alert(result[0]["SpeciesName"]);
            fillSpeciesList(result);
        },
        error: function (result) {
            //alert('Oh no aa :(' + result[0]);
        }
    })
}
function fillSpeciesList(species_list) {
    console.log(species_list[0]["SpeciesName"]);
    var species_select = $('.rreport-species-select');
    for (var i = 0 ; i < species_list.length ; i++) {
        //alert(species_list[i]["SpeciesName"]);
        console.log(species_list[i]["SpeciesName"]);
        species_select.append
        (
            "<li role='presentation'>" +
            "<input type='checkbox' " +
            "name='" + species_list[i]['SpeciesId'] + "' " + 
            "data-stoppropagation='true'" + 
            ">" + species_list[i]['SpeciesName'] + "</li>" +
            "</option>"
        );
    }
}
$('#species-select').on('change', function () {
    var species_id = $('.report-species-select').val();
    $('#variety-select').empty();
    $.ajax({
        type: "GET",
        url: "/" + current_controller + "/fillVarietiesSelect", // the method we are calling
        contentType: "application/json; charset=utf-8",
        data: { "species_id": species_id },
        dataType: "json",
        success: function (result) {
            fillVarietiesList(result);
        },
        error: function (result) {
            alert('Oh no aa :(' + result[0]);
        }
    });
});

参考此答案保持下拉打开

试试这个：

将Script标记添加到您正在使用的任何视图

$(function () { $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function (e) { e.stopPropagation(); }); });
根据接受的答案，将data stopropagation="true"添加到每个复选框元素中。

<input type="checkbox" name="cx1" data-stoppropagation="true">cx1</li>

asp.net MVC - 复选框下拉列表不会在 ASP MVC 中保持关闭

相关内容

最新更新

热门标签：