多个复选框的下拉列表，由分隔;

Question

我正在尝试从一个下拉列表中创建一个多选复选框，并以;连接所选择的结果。

我的代码如下：

var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C',
    ValueD : 'Text D',
    ValueE : 'Text E',
    ValueF : 'Text F'
};
var select = document.getElementById("rec_mode");
for(index in myobject) {
    select.options[select.options.length] = new Option(myobject[index], index);
}

<select id="rec_mode">        
</select>

Answer 1

查看功能selectedValue()，当select更改其值时将触发该功能。另外，对于多个值，必须将multiple属性添加到选择标记。

var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C',
    ValueD : 'Text D',
    ValueE : 'Text E',
    ValueF : 'Text F'
};
var select = document.getElementById("rec_mode");
for(index in myobject) {
    select.options[select.options.length] = new Option(myobject[index], index);
}

function selectedValue() {
  var selectChilds = document.getElementById("rec_mode").childNodes;
  var selectedValues = "";
  
  for(var i = 0; i < selectChilds.length; i++){
    if(selectChilds[i].selected){
      selectedValues += selectChilds[i].value + ";";
    }
  }
  
  alert(selectedValues.substring(0, selectedValues.length -1));
}

<select id="rec_mode" multiple onchange="selectedValue()">        
</select>

编辑

如果您希望使用checkbox标签编写代码，请按照以下代码片段进行操作。

var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C',
    ValueD : 'Text D',
    ValueE : 'Text E',
    ValueF : 'Text F'
};
var chbxs = document.getElementById("rec_mode");
for(index in myobject) {
    chbxs.innerHTML += '<input type="checkbox" value="' + index + '" /> ' + myobject[index] + '<br />'
}

function selectedValue() {
  var selectChilds = document.getElementById("rec_mode").childNodes;
  var selectedValues = "";
  
  for(var i = 0; i < selectChilds.length; i++){
    if(selectChilds[i].checked){
      selectedValues += selectChilds[i].value + ";";
    }
  }
  
  document.getElementById("result").textContent = selectedValues.substring(0, selectedValues.length -1);
}

<div id="rec_mode" onchange="selectedValue()">        
  
</div>

<p id="result"></p>

Answer 2

Mabye，答案是一半，但可以为您提供帮助：）

<canvas id="thecanvas" width="400" height="400"></canvas>

<script>
var canvas = document.getElementById('thecanvas');

if(canvas.getContext) 
{
  var ctx = canvas.getContext('2d');
  drawEllipse(ctx, 10, 10, 100, 60);
  drawEllipseByCenter(ctx, 60,40,20,10);
}

function drawEllipseByCenter(ctx, cx, cy, w, h) {
  drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
}

function drawEllipse(ctx, x, y, w, h) {
  var kappa = .5522848,
      ox = (w / 2) * kappa, // control point offset horizontal
      oy = (h / 2) * kappa, // control point offset vertical
      xe = x + w,           // x-end
      ye = y + h,           // y-end
      xm = x + w / 2,       // x-middle
      ym = y + h / 2;       // y-middle

  ctx.beginPath();
  ctx.moveTo(x, ym);
  ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);

  ctx.stroke();
}

</script>

 var myobject = {
  ValueA : 'Text A',
  ValueB : 'Text B',
  ValueC : 'Text C',
  ValueD : 'Text D',
  ValueE : 'Text E',
  ValueF : 'Text F'
};
  
$(document).ready(function() {
  for(index in myobject) {
    var temp ="<li><input type='checkbox' value='"+index+"' />"+index+"</li>"
    document.getElementById("listOfCheckbox").innerHTML +=temp;
  }
});