当我在第一个选择框中选择城市时,显示城市的相关数据
如何在第一个下拉列表中选择城市时填充 json,以及如何在选择不同城市时显示重新分配的数据?
这是html
$(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: 'currently not available'
}
];
$("#selectCity").on('change', function() {
var locations = cityData[$(this).val()];
var locationString = 'locations';
console.log(locations)
$.each(locations, function(i, item) {
console.log(JSON.stringify(item));
// OUCH!!!
locationString += '<option value="' + item.id + '">' + item.name + '</option>';
});
//console.log(locationString)
$('#secondselectbox').html(locationString);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="UserData">
<h1>MyMovie-Ticket-Booking</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>
</div>
<div>
<select id="secondselectbox"></select>
<select id="secondselectbox"></select>
</div>
当我选择城市类加罗尔时,会显示类加罗尔剧院列表和电影列表,但它显示的是未定义的....
最佳答案
根据您的 json 结构,您没有正确检索“位置”数据。
此外,选项在 json 中没有“id”、“item”。
一定要将最后一个选择的 ID 更改为唯一的东西(比如“thirdselectbox”...)。
将您选择的更改监听器修改为:
$("#selectCity").on('change', function() {
var locations = cityData.filter(c => c.cityName === $(this).val())[0].data;
var locationString = '';
var locationString2 = '';
console.log(locations)
$.each(locations, function(i, item) {
console.log(JSON.stringify(item));
locationString += '<option value="' + item.theaterName + '">' + item.theaterName + '</option>';
locationString2 += '<option value="' + item.movieName + '">' + item.movieName + '</option>';
});
$('#secondselectbox').html(locationString);
$('#thirdselectbox').html(locationString2);
});
参见 working fiddle .
希望这对您有所帮助。
关于javascript - 使用 j 查询在一个下拉列表中选择选项时如何填充 json?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47615765/