How to handle the json array to print the values in html dom in jquery?

Question

I have two drop downs one for movies and another for theaters when i select the movie in first drop down to print the selected movie and which theater the movie is playing and same as select the theater to print the theater and which movie playing that theater ?

how to do that one ....

below is my html code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="UserData">
    <h1><a href="#">Booking</a></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>
    <select class="selectTheater" id="secondselectbox">
    </select>
    <select class="selectMovie" id="thirdselectbox">
    </select>
</div>
<fieldset style="margin-top:20px;">
  <legend>Your Selection</legend>
  <div>Theater: <span id="selectedTheater"></span></div>
  <div>Movie: <span id="selectedMovie"></span></div>
</fieldset>

below is my js

$(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: []
    }
  ];
    $("#selectCity").on('change', function() {
    var locations = cityData.filter(c => c.cityName === $(this).val())[0].data;
    var locationString = '';
    var locationString2 = '';
    $.each(locations, function(i, item) {
        locationString += '<option value="' + item.theaterName + '">' + item.theaterName + '</option>';
        locationString2 += '<option value="' + item.movieName + '">' + item.movieName + '</option>';
    });
    $('#secondselectbox').html(locationString);
    $('#thirdselectbox').html(locationString2);
});
  $("#thirdselectbox").on("change", function(){
    $("span#selectedMovie").text($(this).val());
  });
  $("#secondselectbox").on("change", function(){
    $("span#selectedTheater").text($(this).val());
  });
});

when i selecting the movie only movie name is printing but i want print movie playing theater also how to do that one....

and same as the selecting the theater to print the theater name and which movie to play that theater also .....

Answer 1

ok cant really paste code in the comment block so feel free to downvote the answer part.

$("#thirdselectbox, #secondselectbox, #selectCity").on("change", function(){
  $("span#selectedMovie").text($("#thirdselectbox").val());
  $("span#selectedTheater").text($("#secondselectbox").val());
});

at the moment you are changing a single select and updating a single span. without it knowing about the other select and its value. the code can be refined more im sure. basicaly my solution would add a change event to both selects and then apply the value to the spans accordingly

http://jsbin.com/yibudurafu/edit?html,js,output

---

i removed the ifs now. so that if the city doesnt have any theater and movie it clears the spans