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

Question

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

如何做到这一点......

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

当我选择电影时，只有电影名称正在打印，但我想要打印电影播放影院也如何做......

和选择剧院一样打印剧院名称和播放该剧院的电影......

Answer 1

好的，不能真正将代码粘贴到评论区，所以请随意对答案部分投反对票。

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

目前您正在更改单个选择并更新单个跨度。不知道其他选择及其值(value)。可以更确定地改进代码。基本上我的解决方案会向两个选择添加一个更改事件，然后相应地将值应用于跨度

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

---

我现在删除了ifs。所以如果这个城市没有任何剧院和电影，它就会清除跨度