Question

我在我的页面上有一个下拉列表和一个列表框，两个都是可见的，但我只希望我的下拉列表是可见的，当我从下拉列表中选择任何项目时，列表框应该变得可见..否则它应该被隐藏。。请帮忙！！这是我的HTML

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="utf-8" http-equiv="encoding">
    <title>D3</title>
    <!-- <link rel="stylesheet" type="text/css" href="mystyle1.css" /> -->

    <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="123.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>
        var jsonURL = 'myData.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")
                    // .attr('transform', 'translate(35,' + (height - 25) + ')')
                    .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">
        <div style="height: 30px; width: 50px;">
            <select id="dropdown1"></select>
        </div>
        <style>
            #listbox {
                position: relative;
            }
        </style>
        <div style="margin-left: 150px; margin-top: -30px; height: auto;">
            <select id="listbox" , multiple></select>
        </div>
        <br>
    </form>
</html>

这是我的js

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

            $('<option>', {
                text: 'Select your Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled',
                location: 'fixed'
            }).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);
                }
                /*  $('<option>', {
                 text: 'Select your Option',
                 value: '',
                 selected: 'selected',
                 disabled: 'disabled'
                 }).appendTo('#dropdown1');
                 */

                $('#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;
                        }
                    });
                });
            });
        }
    });
});

Answer 1

以下将帮助您。

$('#dropdown1').change(function() {
    $('#listbox').toggle(this.value != "");
});

#listbox {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown1">
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<select id="listbox" multiple>
    <option value="1">Option 1</option>
    <option value="2">
</select>

仅在下拉列表中单击项目时显示列表框

1 个答案: