Question

我有两个下拉电影，一个用于电影，当我在第一个下拉选择电影以打印所选电影和电影正在播放的电影院时，选择影院来播放影院和播放哪个电影那剧院？

如何做到这一点......

$(document).ready(function() {
  var cityData = [{
      cityName: 'Bengaluru',
      value: "Bengaluru",
      data: [{
          movieName: 'ABC',
          theaterName: 'Tulsi Theatre'
        },
        {
          movieName: 'DEF',
          theaterName: 'PVR'
        },
        {
          movieName: 'GHI',
          theaterName: 'Srinivasa Theatre'
        }
      ]
    },
    {
      cityName: 'Hyderabad',
      value: "Hyderabad",
      data: [{
          movieName: '123',
          theaterName: 'Theatre1'
        },
        {
          movieName: '456',
          theaterName: 'PVR2'
        },
        {
          movieName: '789',
          theaterName: 'Theatre3'
        }
      ]
    },

    {
      cityName: 'Guntur',
      value: "Guntur",
      data: [{
          movieName: 'ABC1',
          theaterName: 'Theatre4'
        },
        {
          movieName: 'DEF2',
          theaterName: 'PVR3'
        },
        {
          movieName: 'GHI3',
          theaterName: 'Theatre5'
        }
      ]
    },

    {
      cityName: 'Ongole',
      value: "Ongole",
      data: []
    }
  ];
  
  $("#selectCity").on('change', function() {
    var locations = cityData.filter(c => c.cityName === $(this).val())[0].data;
    var locationString = '';
    var locationString2 = '';
    $.each(locations, function(i, item) {
      locationString += '<option value="' + item.theaterName + '">' + item.theaterName + '</option>';
      locationString2 += '<option value="' + item.movieName + '">' + item.movieName + '</option>';
    });
    $('#secondselectbox').html(locationString);
    $('#thirdselectbox').html(locationString2);
  });
  
  $("#thirdselectbox, #secondselectbox, #selectCity").on("change", function() {
    $("span#selectedMovie").text($("#thirdselectbox").val());
    $("span#selectedTheater").text($("#secondselectbox").val());
  });
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="UserData">
  <h1><a href="#">Booking</a></h1>
  <select class="selectCity" id="selectCity">
            <option value="City">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>
  <select class="selectTheater" id="secondselectbox">
        </select>
  <select class="selectMovie" id="thirdselectbox">
        </select>
</div>
<fieldset style="margin-top:20px;">
  <legend>Your Selection</legend>
  <div>Theater: <span id="selectedTheater"></span></div>
  <div>Movie: <span id="selectedMovie"></span></div>
</fieldset>

如何根据选择过滤值

当我选择要打印电影名称的电影以及电影正在播放的剧场与选择剧院时一样。

以及如何将所选值存储在本地存储中。

Answer 1

让我们一步一步解决问题

注意：我将使用您的代码，我不会发明自己的

首先：我们将为每个select元素创建一个更改方法，以使我们的代码更好地像这样

 //  city selection 
 $('#selectCity').on('change', function() {});
 //  theater selection 
 $('#secondselectbox').on('change', function() {});
  //  Movie selection 
 $('#thirdselectbox').on('change', function() {});

第二：我们将使位置变量为全局变量，以便我们可以跟踪其他方法中当前选定的数据，因此在上述方法之上我们进行此更改
```
var locations = [] ; 
```
第三：当我们选择一个城市时，我们会发生一个小错误，然后我们选择选择城市选项我们会收到错误
```
can read data of undefined 
```

所以要解决它，我们只需要检查用户是否选择了这样的选择城市选项。

 $('#selectCity').on('change', function() {
    if ( $(this).val().indexOf('City') === -1) {
               // here our logic 
            }
      });

最后：当用户选择电影或影院时，我们会查看位置的所有元素，并检查当前元素是否包含我们选择的电影或影院，并根据我们更改了数据

以下是我编写的解决方案的完整代码，因此请注意一些您理解的内容如果您有任何您不理解的内容我将随时为您提供帮助。希望这可以帮助你

$(document).ready(function() {
    var cityData = [
        {
            cityName: 'Bengaluru',
            value: 'Bengaluru',
            data: [
                {
                    movieName: 'ABC',
                    theaterName: 'Tulsi Theatre',
                },
                {
                    movieName: 'DEF',
                    theaterName: 'PVR',
                },
                {
                    movieName: 'GHI',
                    theaterName: 'Srinivasa Theatre',
                },
            ],
        },
        {
            cityName: 'Hyderabad',
            value: 'Hyderabad',
            data: [
                {
                    movieName: '123',
                    theaterName: 'Theatre1',
                },
                {
                    movieName: '456',
                    theaterName: 'PVR2',
                },
                {
                    movieName: '789',
                    theaterName: 'Theatre3',
                },
            ],
        },

        {
            cityName: 'Guntur',
            value: 'Guntur',
            data: [
                {
                    movieName: 'ABC1',
                    theaterName: 'Theatre4',
                },
                {
                    movieName: 'DEF2',
                    theaterName: 'PVR3',
                },
                {
                    movieName: 'GHI3',
                    theaterName: 'Theatre5',
                },
            ],
        },

        {
            cityName: 'Ongole',
            value: 'Ongole',
            data: [],
        },
    ];
    // make locations global to track it
    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 = '';
            $.each(locations, function(i, item) {
                locationString +=
                    '<option value="' +
                    item.theaterName +
                    '">' +
                    item.theaterName +
                    '</option>';
                locationString2 +=
                    '<option value="' +
                    item.movieName +
                    '">' +
                    item.movieName +
                    '</option>';
            });
            $('#secondselectbox').html(locationString);
            $('#thirdselectbox').html(locationString2);
            //    here we change the values of the current movie and theater
            $('span#selectedMovie').text($('#thirdselectbox').val());
            $('span#selectedTheater').text($('#secondselectbox').val());
        }
    });

    $('#secondselectbox').on('change', function() {
        // here the theater change
        // get the selected value
        var theater = $(this).val();
        // here we need to go through every element in locations
        for(var i in locations){
            // checks if the current element
            // check if its theater equal current theater
            // chenage the values
            if(locations[i].theaterName===theater){
                // here we change the data
                $('span#selectedTheater').text(theater);
                $('span#selectedMovie').text(locations[i].movieName);
                $('#thirdselectbox').val(locations[i].movieName);

            }

        }

    });

    $('#thirdselectbox').on('change', function() {
        // here the movie change
        // get the selected value
        var movie = $(this).val();
        // here we need to go through every element in locations
        for(var i in locations){
            // checks if the current element
            // check if its movie equal current movie
            // chenage the values
            if(locations[i].movieName===movie){
                    // here we change the data
                $('span#selectedMovie').text(movie);
                $('span#selectedTheater').text(locations[i].theaterName);
                // also we need the change the selection value
                $('#secondselectbox').val(locations[i].theaterName);
            }

        }


    });
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="UserData">
  <h1><a href="#">Booking</a></h1>
  <select class="selectCity" id="selectCity">
            <option value="City">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>
  <select class="selectTheater" id="secondselectbox">
        </select>
  <select class="selectMovie" id="thirdselectbox">
        </select>
</div>
<fieldset style="margin-top:20px;">
  <legend>Your Selection</legend>
  <div>Theater: <span id="selectedTheater"></span></div>
  <div>Movie: <span id="selectedMovie"></span></div>
</fieldset>

Answer 2

跟踪您的控件的onchange事件。然后做第二个过程。

示例：

$("#dropdownId").on('change', function() {

  //do the necessary process here

});

如何使用jquery根据选择过滤值？

2 个答案: