Javascript 如何处理json数组以在jquery中打印html dom中的值？

我有两个下拉列表，一个用于电影，另一个用于影院，当我在第一个下拉列表中选择电影以打印所选电影和正在播放的影院时，与选择要打印的影院和正在播放的影院相同

如何做那件事

下面是我的html代码

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

选择城市
班加罗尔
海得拉巴
冈图尔
昂格尔
你的选择
剧院：
电影：

下面是我的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());
  });
});

$（文档）.ready（函数（）{
var cityData=[{
城市名称：“班加鲁”，
价值：“班加鲁”，
数据：[{
电影名称：“ABC”，
剧院名称：“图尔西剧院”
},
{
movieName:'DEF'，
名称：“PVR”
},
{
电影名称：“GHI”，
剧院名称：“斯里尼瓦萨剧院”
}
]
},
{
城市名称：“海得拉巴”，
价值：“海得拉巴”，
数据：[{
电影名称：“123”，
剧院名称：“剧院1”
},
{
电影名称：“456”，
域名：“PVR2”
},
{
电影名称：“789”，
剧院名称：“剧院3”
}
]
},
{
城市名称：“Guntur”，
值：“Guntur”，
数据：[{
电影名称：“ABC1”，
剧院名称：“剧院4”
},
{
movieName:'DEF2'，
名称：“PVR3”
},
{
movieName:‘GHI3’，
剧院名称：“剧院5”
}
]
},
{
城市名称：“Ongole”，
值：“Ongole”，
数据：[]
}
];
$（“#selectCity”）。在（'change'，function（）上{
var locations=cityData.filter（c=>c.cityName===$（this.val（））[0]。数据；
var locationString=''；
var locationString2=''；
$。每个（位置、功能（i、项目）{
locationString+=''+item.theaterName+''；
locationString2+=''+item.movieName+''；
});
$（'#secondselectbox'）.html（locationString）；
$（'thirdselectbox'）.html（locationString2）；
});
$（“#thirdselectbox”）。关于（“更改”，函数（）{
$（$（span#selectedMovie”）.text（$（this.val（））；
});
$（“#secondselectbox”）。在（“更改”，函数（）上{
$（$选定的加热器”）.text（$（this.val（））；
});
});

当我选择电影时，唯一的电影名称是打印，但我想打印电影播放影院，以及如何执行该操作

---

与选择要打印影院名称的影院以及播放该影院的电影相同……

确定无法在注释块中粘贴代码，因此请随意对答案部分进行向下投票

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

此时，您正在更改单个选择并更新单个跨度。它不知道另一个选择及其值。我敢肯定，代码可以进一步细化。基本上，我的解决方案将向两个选择添加一个更改事件，然后将该值相应地应用于跨度

---

---

我现在删除了ifs。因此，如果城市没有任何剧院和电影，它会清除span

并在电影框中添加触发器$（“第三个选择框，#第二个选择框”）.on（“更改”，function（）{$（（“第三个选择框”）.text（$（“#第三个选择框”）.val（））$（“第二个选择框”）.text（$（$（（“#第二个选择框”）.val（））））；o只需在城市选择框中添加$（“#thirdselectbox，#secondselectbox，#selectCity”）。在（“change”，function（）上{当你更改2个选择框时，它只是在做它自己的事情，而不是当你选择城市时。因此，将城市框添加到更改事件将触发，并且由于我们在其中有一个if，它将仅在找到修复的内容时更新跨度。我的答案是一致的。我已经完成了该操作，但我希望在选择框t中更改电影时o打印正在播放电影的电影名称和影院名称？当我更改电影名称时不工作电影名称正在打印未打印正在播放电影的影院名称，这意味着影院名称@WilliamStam@Dep我的更改。这只是为了跨度，对吗？不更改选择框？