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

add a trigger to the movie box aswell $("#thirdselectbox, #secondselectbox").on("change", function(){ $("span#selectedMovie").text($("#thirdselectbox").val()); $("span#selectedTheater").text($("#secondselectbox").val()); }); — WilliamStam
– WilliamStam, Commented Dec 22, 2017 at 8:51

WilliamStam · Accepted Answer · 2017-12-22 09:29:51Z

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

edited Dec 22, 2017 at 9:29

answered Dec 22, 2017 at 8:56

WilliamStam

3042 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

WilliamStam Over a year ago

o just add in the city select box aswell $("#thirdselectbox, #secondselectbox, #selectCity").on("change", function(){

WilliamStam Over a year ago

it was just doing its thing when you change the 2 selectboxes but not when you select the city. so adding in the city box to the change event would fire and since we have an if in there it will only update the spans when it finds something jsbin.com/yibudurafu/edit?html,js,output fixed my answer accordingly

Dep Over a year ago

i am already done that one but i want when i changing the movie in select box to print the movie name and theater name where movie is playing?

Dep Over a year ago

no not working when i changing the movie name movie name is printing not printing the where the movie is playing that means theater name @William Stam

WilliamStam Over a year ago

@Dep i.imgur.com/KZ04am7.png mine changes. this is just for the spans right? not to change the select box ?

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related