Question

我想出了如何在不使用自举库以外的自定义Javascript的情况下创建复选框下拉列表。没有用于处理表单数据的Javascript。：

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

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

ASP-MVC代码只是container div及其内容。 Here是一个现实的例子，只要它保持不变。

HTML + Bootstrap：

<!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>
}

编辑：冒犯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]);
        }

    });
});

Answer 1

参考这个答案Keep DropDown Open

试试这个：

将脚本标记添加到您正在处理的任何视图

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

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

复选框下拉列表不会停留在ASP MVC中

1 个答案: