如何使用j查询在一个下拉列表中选择选项时填充json？

Z时代
2024-01-10
分类：问答

当我选择的第一个选择框中城市展示城市心软数据如何使用j查询在一个下拉列表中选择选项时填充json？

如何填充的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">  
    \t \t \t \t <option value="City">Select City</option>  
    \t \t \t \t <option value="Bengaluru">Bengaluru</option>  
    \t \t \t \t <option value="Hyderabad">Hyderabad</option>  
    \t \t \t \t <option value="Guntur">Guntur</option>  
    \t \t \t \t <option value="Ongole">Ongole</option>  
    \t \t \t </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。

希望这会有所帮助。

回答：

确保您使用必要的数据更新您的select元素。只要放置JSON并包含它就不能解决问题。你可以在这里看到how to update a select element dynamically的教程。

并且不要使用具有一个ID的两个元素。它可能会导致更多问题。您可以为两个选择元素使用不同的ID。

回答：

$(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() 
    { 
$('#secondselectbox').html(""); 
var selectedlocations = $("#selectCity").val(); 
    var locationString = 'locations'; 
    var locationlist=cityData 
    $.each(locationlist, function(i, item) { 
    var EachLocationdetail=JSON.stringify(item); 
     var _json=JSON.parse(EachLocationdetail); 
    if(_json.cityName==selectedlocations) 
    { 
     $.each(_json.data, function() 
     { 
     locationString += '<option value="' +this.movieName + '">' + this.movieName + '</option>'; 
    }); 
     } 
    }); 
    //console.log(locationString) 
    $('#secondselectbox').html(locationString); 
    }); 
});