How to populate the json when select the option in one drop down using j query?

Question

When i am selecting the city in first select box show the city relented data

how to populate the the json when selecting city in first drop down and how to show the relented data when select the different city?

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

when i am selecting the city Bangalore show the Bangalore theater list and movie list but it is showing the undefined ....

Why are there 2 `select` box with the same id? – Varun Dec 03 '17 at 06:07 — Varun, Dec 03 '17 at 06:07
i want to display theater and movie name at a time – Babu Dec 03 '17 at 06:15 — Babu, Dec 03 '17 at 06:15

dev8080 · Accepted Answer · 2017-12-03T07:44:23.347

2

You were not retrieving your 'locations' data correctly, per your json structure.

Also, the options do not have an 'id', 'item' in the json.

Do change the last select's id to something unique (say 'thirdselectbox'...).

Modify your select's change listener to:

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

See working fiddle.

Hope this helps.

edited Dec 03 '17 at 07:44

answered Dec 03 '17 at 06:27

dev8080

3,950
1
12
18

Uncaught SyntaxError: Unexpected end of input – Babu Dec 03 '17 at 06:29
let me give it a try then – dev8080 Dec 03 '17 at 06:30
when i am selecting the city in first option it will display the reelected city information movies and theater list of city – Babu Dec 03 '17 at 06:34
Also included a fiddle for your reference. – dev8080 Dec 03 '17 at 06:40
but it is not showing the theater list only display the movie list – Babu Dec 03 '17 at 06:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160366/discussion-between-venu-chowdary-and-dev8080). – Babu Dec 03 '17 at 06:52

score 0 · Answer 2 · answered Dec 03 '17 at 06:34

0

Make sure you update your select element with necessary data. Just placing the JSON and including it won't solve the issue. You can see a tutorial here on how to update a select element dynamically.

And don't use two elements with one ID. It can cause more problems. You can use different ID's for the two select elements.

answered Dec 03 '17 at 06:34

buddhiv

692
1
7
24

yes you said is correct don't use two elements with one ID – Babu Dec 03 '17 at 08:07
It creates a lot of confusions specially in dynamic applications. – buddhiv Dec 03 '17 at 08:41

score 0 · Answer 3 · answered Dec 03 '17 at 07:06

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

How to populate the json when select the option in one drop down using j query?

3 Answers3