Question

下面是我的代码，它显示来自JSON变量的电影数据，并根据所选城市将其显示在下拉列表中。

我需要显示当用户选择电影中的电影下拉列表以打印电影名称和影院列表以及影院下拉时..

并选择一个下拉另一个下拉不要更改（当用户选择电影下拉时，影院下拉是默认状态以及另一个）

下面是我的HTML

   <div class="UserData">
            <h1><a href="moviebooking.html">MyMovie-Ticket-Booking</a></h1>
            <select class="selectCity" id="selectCity">
                <option value="">Select City</option>
                <option value="Bengaluru">Bengaluru</option>
                <option value="Hyderabad">Hyderabad</option>
                <option value="Guntur">Guntur</option>
                <option value="Ongole">Ongole</option>
            </select>
            <span id="welcome"> </span>
            <p id="demo" class="cityName"></p>
        </div>
         <div class="MoviesList" id="List">
            <label class="TitleName">Movie Name:</label>
            <select id="thirdselectbox" class="TheaterList">
                 <option selected="selected"> Select Movie </option>
            </select>
            <label class="TitleName">Theater Name:</label>
            <select id="secondselectbox" class="MovieList">
                 <option selected="selected"> Select Theater </option>
            </select>
          <fieldset class="Container">
            <legend class="selection">Your Selection</legend>
            <div class="TmName">
                Theater: <span id="selectedTheater"></span>
                <div id="showTimings" style="width: 30%;margin: 0 auto;">
                    <!--<button class="movieTimings"></button>
					<button class="movieTimings"></button>
					<button class="movieTimings"></button>
					<button class="movieTimings"></button>-->
                </div>
                Movie: <span id="selectedMovie"></span>
            </div>
         </fieldset>
        </div>

{{1}}

Answer 1

$(document).ready(function() {
    var cityData = [
        {
            cityName: 'Bengaluru',
            value: 'Bengaluru',
            data: [
                {
                    movieName: 'ABC',
                    theaterName: 'Tulsi Theatre',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'DEF',
                    theaterName: 'PVR',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'GHI',
                    theaterName: 'Srinivasa Theatre',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },
        {
            cityName: 'Hyderabad',
            value: 'Hyderabad',
            data: [
                {
                    movieName: '123',
                    theaterName: 'Theatre1',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: '456',
                    theaterName: 'PVR2',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: '789',
                    theaterName: 'Theatre3',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Guntur',
            value: 'Guntur',
            data: [
                {
                    movieName: 'ABC1',
                    theaterName: 'Theatre4',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'DEF2',
                    theaterName: 'PVR3',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
                {
                    movieName: 'GHI3',
                    theaterName: 'Theatre5',
                    showTImings:['8:00AM','12:00PM','4:00PM','9:00PM']
                },
            ],
        },

        {
            cityName: 'Ongole',
            value: 'Ongole',
            data: [],
        },
    ];

    var locations = [] ;
    $('#selectCity').on('change', function() {
        if ($(this).val().indexOf('City') === -1) {
        locations = cityData.filter( c => c.cityName === $(this).val(),)[0].data;
            var locationString = '';
            var locationString2 = '';

            if(locations.length == 0){
              $('#showTimings').html('No shows available');
            }

            $.each(locations, function(i, item) {
                locationString +='<option value="' +item.theaterName +'">' +item.theaterName +'</option>';
                locationString2 +='<option value="' +item.movieName +'">' +item.movieName +'</option>';

                $('#showTimings').html('');
                $.each(locations[i].showTImings,function(i,v){
                  var button = $('<button />').html(v);
                  $('#showTimings').append(button);
                });
            });
            $('#secondselectbox').html(locationString);
            $('#thirdselectbox').html(locationString2);
            $('span#selectedMovie').text($('#thirdselectbox').val());
            $('span#selectedTheater').text($('#secondselectbox').val());


        }
    });

    $('#secondselectbox').on('change', function() {
        var theater = $(this).val();
        for(var i in locations){
            if(locations[i].theaterName===theater){
                $('span#selectedTheater').text(theater);
                $('span#selectedMovie').text(locations[i].movieName);
                $('#thirdselectbox').val(locations[i].movieName);

                $('#showTimings').html('');
                $.each(locations[i].showTImings,function(i,v){
                  var button = $('<button />').html(v);
                  $('#showTimings').append(button);
                });
            }
        }


    });

    $('#thirdselectbox').on('change', function() {
        var movie = $(this).val();
        for(var i in locations){
            if(locations[i].movieName===movie){
                $('span#selectedMovie').text(movie);
                $('span#selectedTheater').text(locations[i].theaterName);
                $('#secondselectbox').val(locations[i].theaterName);

                $('#showTimings').html('');
                $.each(locations[i].showTImings,function(i,v){
                  var button = $('<button />').html(v);
                  $('#showTimings').append(button);
                });



            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="UserData">
            <h1><a href="moviebooking.html">MyMovie-Ticket-Booking</a></h1>
            <select class="selectCity" id="selectCity">
                <option value="">Select City</option>
                <option value="Bengaluru">Bengaluru</option>
                <option value="Hyderabad">Hyderabad</option>
                <option value="Guntur">Guntur</option>
                <option value="Ongole">Ongole</option>
            </select>
            <span id="welcome"> </span>
            <p id="demo" class="cityName"></p>
        </div>
         <div class="MoviesList" id="List">
            <label class="TitleName">Movie Name:</label>
            <select id="thirdselectbox" class="TheaterList">
                 <option selected="selected"> Select Movie </option>
            </select>
            <label class="TitleName">Theater Name:</label>
            <select id="secondselectbox" class="MovieList">
                 <option selected="selected"> Select Theater </option>
            </select>
          <fieldset class="Container">
            <legend class="selection">Your Selection</legend>
            <div class="TmName">
                Theater: <span id="selectedTheater"></span>
                <div id="showTimings" style="width: 30%;margin: 0 auto;">
                    <!--<button class="movieTimings"></button>
					<button class="movieTimings"></button>
					<button class="movieTimings"></button>
					<button class="movieTimings"></button>-->
                </div>
                Movie: <span id="selectedMovie"></span>
            </div>
         </fieldset>
        </div>

如何使用jquery基于下拉选择打印值？

1 个答案: