如何使用j查詢在一個下拉列表中選擇選項時填充json？

當我選擇的第一個選擇框中城市展示城市心軟數據如何使用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>

當我選擇班加羅爾市秀卻是露出了不確定....

來源

2017-12-03 Babu

爲什麼用相同的ID有2'select'箱？ – Varun

我想一次顯示劇院和電影名稱 – Babu

您在班加羅爾劇院清單和電影列表根據你的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。

希望這會有所幫助。

來源

2017-12-03 06:27:08 dev8080

我收到錯誤 – Babu

未捕獲的SyntaxError：意外的輸入結束 – Babu

讓我試試然後 – dev8080

確保您使用必要的數據更新您的select元素。只要放置JSON幷包含它就不能解決問題。你可以在這裏看到how to update a select element dynamically的教程。

並且不要使用具有一個ID的兩個元素。它可能會導致更多問題。您可以爲兩個選擇元素使用不同的ID。

來源

2017-12-03 06:34:13 buddhiv

你已經有了另一個很好的答案！ :) – buddhiv

是的，你說的是正確的不要使用兩個元素與一個ID – Babu

它在動態應用程序中造成了很多混亂。 – buddhiv

$(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); 
    }); 

});

。

Try this fiddle

來源

2017-12-03 07:06:33

如何使用j查詢在一個下拉列表中選擇選項時填充json？

回答

相關問題