gpt4 book ai didi

javascript - 如何使用 jquery 根据选择过滤值?

转载 作者:行者123 更新时间:2023-11-30 20:52:56 25 4
gpt4 key购买 nike

我有两个下拉菜单,一个用于电影,另一个用于剧院,当我在第一个下拉菜单中选择电影以打印所选电影和电影正在播放的剧院时,与选择剧院相同以打印剧院和正在播放的电影那个剧院?

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

$(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>

如何根据选择过滤值

当我选择要打印电影名称和电影正在哪个剧院播放的电影时,与选择剧院相同。

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

最佳答案

让我们一步步解决问题

注意:我会使用你的代码,我不会发明我自己的

  • 首先:我们将为每个选择元素创建一个更改方法,以使我们的代码像这样更好

     //  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>

关于javascript - 如何使用 jquery 根据选择过滤值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47974586/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com