javascript - 禁用下拉菜单中的选项 - d3

Question

我对 D3 还比较陌生，并且在入门时遇到了一些问题。我使用下面的代码创建了一个下拉菜单

var signal = d3.select('#signal_container');
var signalName = ["Please Select", "Temperature", "Pressure"];
var signalSelect = signal
    .append('select')
    .attr('class', 'select')
    .attr('multiple', '');
var signalOptions = signalSelect
    .selectAll('option')
    .data(signalName).enter()
    .append('option')
    .text(function (d) { return d; });

我想知道是否有办法禁用“请选择”选项，以便用户无法选择该选项？

Answer 1

您必须将属性disabled 设置为该选项。

有几种方法可以做到这一点。这个使用each:

var signal = d3.select('body');
var signalName = ["Please Select", "Temperature", "Pressure"];
var signalSelect = signal
  .append('select')
  .attr('class', 'select')
  .attr('multiple', '');
var signalOptions = signalSelect
  .selectAll('option')
  .data(signalName)
  .enter()
  .append('option')
  .text(function(d) {
    return d;
  })
  .each(function(d) {
    if (d === "Please Select") {
      d3.select(this).property("disabled", true)
    }
  });

<script src="https://d3js.org/d3.v3.min.js"></script>