Question

当我从下拉列表中选择任何项目时，列表框会附加到带有一组值的下拉列表，但问题是列表框包含许多值，因此它变大，下拉列表下移到列表框的末尾。这是我的HTML

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="utf-8" http-equiv="encoding">

    <title>D3</title>
    <style>
        body {
            color: #000;
        }
        .axis {
            font: 10px sans-serif;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        .bar {
            fill: steelblue;
        }

        .bar:hover {
            fill: brown;
        }
    </style>

    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="my_script.js" type="text/javascript"></script>

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

<body>
<div id="chart"></div>
<div align="center">
    From : <input type="date" name="field1" id="field1" /> To : <input type="date" name="field2" id="field2" /><br /><br />
    <input type="button" onclick="render(true)" value="Submit" />
</div>

 <script>
    function ShowHideListBox(e) {

        var IsOpen = $('#listbox').attr('IsOpen')
        if (IsOpen == "false") {
            ShowList(e.target)
        }
        else {
            HideList(e.target)
        }
    }

    function ShowList(elem) {
        $('#listbox').attr('IsOpen', 'true')
        $('#listbox').show()
    }

    function HideList(elem) {
        $('#listbox').attr('IsOpen', 'false')
        $('#listbox').hide()
    }

</script>


<script>
    var jsonURL = 'data.json';

    var myData = [];

    var margin = {
        top: 20,
        right: 0,
        bottom: 80,
        left: 40
    };
    var width = 500 - margin.left - margin.right;
    var height = 300 - margin.top - margin.bottom;

    var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
    var yScale = d3.scale.linear().range([height, 0]);
    var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d"));
    var vAxis = d3.svg.axis().scale(yScale).orient('left');
    var tooltip = d3.select('body').append('div')
            .style('position', 'absolute')
            .style('background', '#f4f4f4')
            .style('padding', '5 15px')
            .style('border', '1px #333 solid')
            .style('border-radius', '5px')
            .style('opacity', 'o');

    function getDates() {
        return [document.getElementById('field1').value, document.getElementById('field2').value];
    }

    function render(filterByDates) {

        d3.select('svg').remove();

        if (filterByDates) {
            var date1 = new Date(document.getElementById('field1').value);
            var date2 = new Date(document.getElementById('field2').value);

            myData = myData.filter(function(d) {
                return d.date >= date1 && d.date <= date2;
            });
        }

        xScale.domain(myData.map(function(d) {
            return d.date;
        }));

        yScale.domain([0, d3.max(myData, function(d) {
            return d.value;
        })]);

        var svg = d3.select('#chart').append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg
                .append('g')
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(hAxis)
                .selectAll("text")
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", "-.55em")
                .attr("transform", "rotate(-90)");

        svg
                .append('g')
                .attr("class", "y axis")
                .call(vAxis)

        svg
                .selectAll(".bar")
                .data(myData)
                .enter().append("rect")
                .attr("class", "bar")
                .style("fill", "steelblue")
                .attr("x", function(d) {
                    return xScale(d.date);
                })
                .attr("width", xScale.rangeBand())
                .attr("y", function(d) {
                    return yScale(d.value);
                })
                .attr("height", function(d) {
                    return height - yScale(d.value);
                })
                .on('mouseover', function(d) {
                    tooltip.transition()
                            .style('opacity', 1)

                    tooltip.html(d.value)
                            .style('left', (d3.event.pageX) + 'px')
                            .style('top', (d3.event.pagey) + 'px')
                    d3.select(this).style('opacity', 0.5)
                })
                .on('mouseout', function(d) {
                    tooltip.transition()
                            .style('opacity', 0)
                    d3.select(this).style('opacity', 1)
                });
    }

    d3.json(jsonURL, function(data) {
        myData = data;
        myData.forEach(function(d) {
            d.date = new Date(d.date);
            d.name = +d.name;
        });

        render(false);
    });
</script>


<label> List of Tables : </label><br>


    <form name="myform" id="myForm">
        <select id="dropdown1" onclick="return ShowHideListBox(event)"></select>


        <select id="listbox" multiple style="display:none; cursor:default;" isopen="false"></select>
    </form>

</body>
</html>

我的js

$(document).ready(function() {
    $.ajax({
        url: "data.json",
        dataType: "json",
        success: function(obj) {
            var jsObject = obj;
            var usedNames = [];



            $('<option>', {
                text: 'Select your Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled'
            }).appendTo('#dropdown1');


            $.each(obj, function(key, value) {
                if (usedNames.indexOf(value.name) == -1) {
                    $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                    usedNames.push(value.name);
                }

                $('#dropdown1').change(function() {
                    $('#listbox').empty();

                    $('<option>', {
                        text: 'Select your List Option',
                        value: '',
                        selected: 'selected',
                        disabled: 'disabled'
                    }).appendTo('#listbox');

                    var selection = $('#dropdown1 :selected').text();
                 //   var selection = $('#dropdown1 :selected').text();
                    $.each(jsObject, function(index, value) {
                        if (value['name'] == selection) {
                            var optionHtml = '';
                            for (var i = 1; i <= 20; i++) {
                                var attr = 'attr' + ('000' + i).substr(-3);
                                optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';
                            }

                            $("#listbox").css("width","500px")

                            $("#listbox").css("height","300px")
                            $('#listbox').append(optionHtml); return false;
                        }
                    });
                });
            });
        }
    });
});

将列表框附加到下拉列表

0 个答案: