Question

我创建了一个下拉栏，当点击它时，它也会填充带有子分支的复选框树。现在，我真正想要的是，当我选中复选框树中显示的几个选项时，它们应该填充在顶部下拉栏的顶部，这样我才能知道，我有在下面显示的复选框树中选择了这些选项。

请任何人通过纠正我的代码中的错误来帮助我。

这是我的代码，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
    .multiselect {
        width: 300px;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        font-weight: bold;
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
    #checkboxes {
        display: none;
        border: 1px #dadada solid;
    }
    #checkboxes label {
        display: block;
    }
    #checkboxes label:hover {
        background-color: #1e90ff;
    }
</style>
<body>

<div class="container">
  <form>
    <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
          <label>Page Permission</label>
            <select>
                <label>Page Permission</label>
            </select>
            <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
            <input type="checkbox" name="Page Action1" value="Page"> Page Action 1<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action1" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action1" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action1" value="Page1"> Page 3<br>

  </ul>
  <input type="checkbox" name="Page Action2" value="Page"> Page Action 2<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action2" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action2" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action2" value="Page1"> Page 3<br>

  </ul>
  <input type="checkbox" name="Page Action3" value="Page"> Page Action 3<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action3" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action3" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action3" value="Page1"> Page 3<br>

  </ul>
  <input type="checkbox" name="Page Action4" value="Page"> Page Action 4<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action4" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action4" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action4" value="Page1"> Page 3<br>

  </ul>
  <input type="checkbox" name="Page Action5" value="Page"> Page Action 5<br>
    <ul class="dropdown">

    <input type="checkbox" name="Page Action5" value="Page1"> Page 1<br>
    <input type="checkbox" name="Page Action5" value="Page1"> Page 2<br>
    <input type="checkbox" name="Page Action5" value="Page1"> Page 3<br>

  </ul>
        </div>
    </div>
</form>


        </div> </div> 
</html>
<script>

    var expanded = false;
    function showCheckboxes() {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded) {
            checkboxes.style.display = "block";
            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }
</script>

Answer 1

请仔细检查下面添加的代码。我添加了一个额外的div来显示具有id“checks”的选定值。此外，我更改了复选框的值以识别单击的复选框。

<div class="container">
          <form>
            <div id="checks"></div>
            <div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()">
                  <label>Page Permission</label>
                    <select>
                        <option>Page Permission</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes">
                    <input type="checkbox" name="Page Action1" value="Page"> Page Action 1<br>
                            <ul class="dropdown">

                            <input type="checkbox" name="Page Action1" value="Page11"> Page 1<br>
                            <input type="checkbox" name="Page Action1" value="Page12"> Page 2<br>
                            <input type="checkbox" name="Page Action1" value="Page13"> Page 3<br>

                            </ul>
                            <input type="checkbox" name="Page Action2" value="Page"> Page Action 2<br>
                            <ul class="dropdown">

                            <input type="checkbox" name="Page Action2" value="Page21"> Page 1<br>
                            <input type="checkbox" name="Page Action2" value="Page22"> Page 2<br>
                            <input type="checkbox" name="Page Action2" value="Page23"> Page 3<br>

                            </ul>
                            <input type="checkbox" name="Page Action3" value="Page"> Page Action 3<br>
                            <ul class="dropdown">

                            <input type="checkbox" name="Page Action3" value="Page31"> Page 1<br>
                            <input type="checkbox" name="Page Action3" value="Page32"> Page 2<br>
                            <input type="checkbox" name="Page Action3" value="Page33"> Page 3<br>

                            </ul>
                            <input type="checkbox" name="Page Action4" value="Page"> Page Action 4<br>
                            <ul class="dropdown">

                            <input type="checkbox" name="Page Action4" value="Page41"> Page 1<br>
                            <input type="checkbox" name="Page Action4" value="Page42"> Page 2<br>
                            <input type="checkbox" name="Page Action4" value="Page43"> Page 3<br>

                            </ul>
                        <input type="checkbox" name="Page Action5" value="Page"> Page Action 5<br>
                        <ul class="dropdown">

                        <input type="checkbox" name="Page Action5" value="Page51"> Page 1<br>
                        <input type="checkbox" name="Page Action5" value="Page52"> Page 2<br>
                        <input type="checkbox" name="Page Action5" value="Page53"> Page 3<br>

                        </ul>
                </div>
            </div>
            </form>
    </div>

以下是jquery代码，它将在菜单栏顶部显示已选中的复选框值，并在取消选中相同的复选框时将其删除。

$(document).ready(function() {
        $(":checkbox").click (function(){           
              //alert($(this).val());             
              if($(this).prop('checked') == true){
                $("#checks").append(" <span id='"+$(this).val()+"'>"+$(this).val()+"</span>");
              }
              else {
                $("#"+$(this).val()).remove();
              }
            });
        });

Answer 2

在顶部查看所有选定项目作为标记的方法，可以取消选中删除顶部标记的相应复选框，使用开源插件作为标记管理器。

我建议你使用后期绑定来获得可读性。所以，请考虑避免每次可能时混合使用html和javascript。这样你就必须处理三个不同的部分：css，html和js。

要将tagmanager定位在问题中报告的标签之后，我不得不改变你的overSelect样式添加“z-index：-1;”，这意味着tagmanager必须位于顶部和标签之后。

在下面的代码段中：

$(function () {
  // initialize the tags manager and hide the input field
  $('#selectedItems').tagsManager().hide();

  // handle the selectBox click
  $('.selectBox').on('click', function(e) {
    var srcEle = $(e.target);
    if (srcEle.is('span') && srcEle.parent().hasClass('tm-tag')) {
      return false;
    }
    if (srcEle.is('a') && srcEle.hasClass('tm-tag-remove')) {
      var prevObj = srcEle.prev();
      if (prevObj.is('span')) {
        var txtArr = prevObj.text().split(' - ');
        $('#checkboxes').find(':input[name$="' + txtArr[1] + '"]').filter(function(index, element) {
          return element.nextSibling.textContent.indexOf(txtArr[0]) != -1;
        }).prop('checked', false );
      }
      return false;
    }
    var cachedCheckBoxes = $('#checkboxes');
    if (!cachedCheckBoxes.is(':visible')) {
      cachedCheckBoxes.show();
    } else {
      cachedCheckBoxes.hide();
      var cacheTagsManager = $('#selectedItems');
      cacheTagsManager.tagsManager('empty');
      $(':checkbox:checked').each(function(index, element) {
        cacheTagsManager.tagsManager('pushTag', element.nextSibling.textContent.trim() + ' - ' + element.name.replace(/^Page /, '').trim())
      });
    }
  });
});

.multiselect {
  width: 300px;
}
.selectBox {
  position: relative;
}
.selectBox select {
  width: 100%;
  font-weight: bold;
}
.overSelect {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;
}
#checkboxes {
  display: none;
  border: 1px #dadada solid;
}
#checkboxes label {
  display: block;
}
#checkboxes label:hover {
  background-color: #1e90ff;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/tagmanager/3.0.2/tagmanager.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/tagmanager/3.0.2/tagmanager.min.js"></script>

<style>
.tm-tag {
  color: #555555;
  background-color: #f5f5f5;
  border: #bbbbbb 1px solid;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  display: inline-block;
  border-radius: 2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10.0px;
  margin: 0 5px 5px 0;
  padding: 0px 2px;
  text-decoration: none;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  vertical-align: middle;
}
</style>

<div class="container">
    <form>
        <div class="multiselect">
            <div class="selectBox">
                <label>Page Level Permission:&nbsp;</label><input id="selectedItems" type="text" name="tags" placeholder="Tags" class="tm-input tm-tag"/>
                <select>
                    <label>Page Level Permission</label>
                </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
                <input type="checkbox" name="Page Action1" value="Page"> Page Action 1<br>
                <ul class="dropdown">
                    <input type="checkbox" name="Page Action1" value="Page1"> Page 1<br>
                    <input type="checkbox" name="Page Action1" value="Page1"> Page 2<br>
                    <input type="checkbox" name="Page Action1" value="Page1"> Page 3<br>
                </ul>
                <input type="checkbox" name="Page Action2" value="Page"> Page Action 2<br>
                <ul class="dropdown">
                    <input type="checkbox" name="Page Action2" value="Page1"> Page 1<br>
                    <input type="checkbox" name="Page Action2" value="Page1"> Page 2<br>
                    <input type="checkbox" name="Page Action2" value="Page1"> Page 3<br>
                </ul>
                <input type="checkbox" name="Page Action3" value="Page"> Page Action 3<br>
                <ul class="dropdown">
                    <input type="checkbox" name="Page Action3" value="Page1"> Page 1<br>
                    <input type="checkbox" name="Page Action3" value="Page1"> Page 2<br>
                    <input type="checkbox" name="Page Action3" value="Page1"> Page 3<br>
                </ul>
                <input type="checkbox" name="Page Action4" value="Page"> Page Action 4<br>
                <ul class="dropdown">
                    <input type="checkbox" name="Page Action4" value="Page1"> Page 1<br>
                    <input type="checkbox" name="Page Action4" value="Page1"> Page 2<br>
                    <input type="checkbox" name="Page Action4" value="Page1"> Page 3<br>
                </ul>
                <input type="checkbox" name="Page Action5" value="Page"> Page Action 5<br>
                <ul class="dropdown">
                    <input type="checkbox" name="Page Action5" value="Page1"> Page 1<br>
                    <input type="checkbox" name="Page Action5" value="Page1"> Page 2<br>
                    <input type="checkbox" name="Page Action5" value="Page1"> Page 3<br>
                </ul>
            </div>
        </div>
    </form>
</div>

显示复选框树中选择的选项

2 个答案: