Question

当我在第一个选择框中选择城市时，显示城市提交的数据

如何在第一个下拉列表中选择城市时填充json，以及如何在选择不同的城市时显示更改的数据？

这是html

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

当我选择班加罗尔城市时，显示班加罗尔剧院列表和电影列表，但它显示未定义....

Answer 1

根据您的json结构，您没有正确检索“位置”数据。

此外，选项在json中没有'id'，'item'。

将最后一个选择的ID更改为独特的内容（例如'thirdselectbox'...）。

将select的更改侦听器修改为：

$("#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。

希望这有帮助。

Answer 2

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

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

Answer 3

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

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

3 个答案: