下拉选中框不起作用

时间:2015-10-14 05:27:11

标签: javascript jquery html twitter-bootstrap flask

<!DOCTYPE html>
<html lang="en">

<head>
</head>
    <title>test App</title>

    <!-- Bootstrap Core CSS -->
    <link href="/Project/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/Project/static/css/sb-admin.css" rel="stylesheet">
    <link href="/Project/static/css/bootstrap-multiselect.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/Project/static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script src="/Project/static/lib/js/jquery.min.js"></script>
<body>
<div >

        <ul id="ts" class="collapse">
            <select id="time-stamp" multiple="multiple">
                <option value="T1">T1</option>
                <option value="T2">T2</option>
                <option value="T3">T3</option>
                <option value="T4">T4</option>
                <option value="T5">T5</option>
            </select>
        </ul>
        <ul id="cs" class="collapse">
            <select id="chart-select" onchange="fillChart()">
                 <option value="error_info">select</option>
                 <option value="session_history">Error Info</option>
            </select>
        </ul>

</div>
<script src="/Project/static/js/jquery.js"></script>
<script src="/Project/static/js/bootstrap.min.js"></script>
<script src="/Project/static/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
        function fillChart()
        {

            var chkd = document.getElementById("time-stamp");
            var cids = [];
            for (var i=0;i<chkd.length;i++)
            {
                alert(i);
                if(chkd[i].checked)
                {
                    cids.push(chkd[i]);
                }
            }

            alert(cids);
        }
</script>

</body>
</html>

我正在尝试阅读所选复选框的所有字段的文本。但是,alert(cids)在这里给出了null。 chkd[i].checked始终在cids.push(chkd[i])未执行时返回false。我可以知道我哪里错了吗?

2 个答案:

答案 0 :(得分:1)

您必须检查属性selected而不是checked

请更改

if(chkd[i].checked)

if(chkd[i].selected)

另请查看documentation of option element

答案 1 :(得分:0)

您需要检查selected而不是checked属性。请参阅下面的代码:

&#13;
&#13;
function fillChart() {

  var chkd = document.getElementById("time-stamp");
  var cids = [];
  for (var i = 0; i < chkd.length; i++) {
    //alert(i);
    if (chkd[i].selected) {
      cids.push(chkd[i].value);
    }
  }

  console.log(cids);
}
&#13;
<select id="time-stamp" multiple="multiple">
  <option value="T1">T1</option>
  <option value="T2">T2</option>
  <option value="T3">T3</option>
  <option value="T4">T4</option>
  <option value="T5">T5</option>
</select>

<select id="chart-select" onchange="fillChart()">
  <option value="error_info">select</option>
  <option value="session_history">Error Info</option>
</select>
&#13;
&#13;
&#13;