Question

我试图在引导程序下拉列表中只显示一个复选框，但它只显示为空白。这是一个通用的下拉列表。下面我展示了我的代码和一些截图。我觉得这有点离奇，不确定这是否是一个有意义的事情。

stackblitz url：

const styles = {
  header: {
    backgroundImage: `url(${background})`,
    height: '100vh',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover'
  },

  content: {
    height: '100%',
    width: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  }
}

<div style={styles.header}>
  <div style={styles.content}>
     Portfolio
  </div>
</div>

代码：

https://stackblitz.com/edit/angular-45uk59

组件：

<div class="form-group">
  <label *ngIf='label!=null' for={{id}}>{{label}}}</label>
  <select class="form-control" id="{{id}}">
    <option value="-1"></option>
    <option *ngFor="let item of content; let i = index" value="{{item.value}}">
      <span *ngIf='hasCheckbox === true'>
        <!-- <input type="checkbox" id="{{id}}_i" /> &nbsp -->
        <input type="checkbox" name="item.text[{{i}}]" value="{{item.value}}" /> &nbsp;
      </span>
      {{item.text}}
    </option>
  </select>
</div>

截图：

代码：

Answer 1

你可以用一种类似黑客的形式包装div。不完全是你想要的但它有效：

<强> HTML

<form>
  <div class="selectthingy">
    <div class="Box" onclick="showMeTheBoxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="checkboxselect"></div>
    </div>
    <div id="boxes_wrapper">
      <label for="one">
        <input type="checkbox" id="1" />SALSA</label>
      <label for="two">
        <input type="checkbox" id="2" />MUMBA</label>
      <label for="three">
        <input type="checkbox" id="3" />CHICKEN DANCE</label>
    </div>
  </div>
</form>

<强> CSS

.selectthingy{
  width: 300px;
}

.Box {
  position: relative;
}

.Box select {
  width: 100%;
}

.checkboxselect {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
}

#boxes_wrapper {
  display: none;
  border: 1px green solid;
}

#boxes_wrapper label {
  display: block;
}

#boxes_wrapper label:hover {
  background-color: blue;
}

<强> JS

var boxthingy= false;

function showMeTheBoxes() {
  var boxes = document.getElementById("boxes_wrapper");
  if (!boxthingy) {
    boxes.style.display = "block";
    boxthingy= true;
  } else {
    boxes.style.display = "none";
    boxthingy= false;
  }
}

https://codepen.io/Archtects/pen/LmpLZr

Answer 2

我建议使用带表情符号的纯文本，而不是复选框。它将在hasCheckbox属性的帮助下与ngIf一起显示和隐藏，并结合新属性来跟踪所选元素：

export class DropDownContent {
  value: number;
  text: string;
  selected: boolean

}    
...
this.contentInput = [{
      "value": 0,
      "text": "Users",
      "selected": true
    },
    {...

所以模板可以是：

<select id="{{id}}" multiple>
    <option (dblclick)="item.selected=!item.selected" *ngFor="let item of content; let i = index" value="{{item.value}}">
      <span *ngIf="item.selected && hasCheckbox">✓</span>
      {{item.text}}
    </option>
</select>

Demo

复选框未显示在引导程序下拉列表中

2 个答案: