文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用jQuery过滤选项？

问如何使用jQuery过滤选项？
EN

Stack Overflow用户
提问于 2017-12-14 12:19:48
回答 2查看 70关注 0票数 0

如何过滤选项..。

当我选择城市电影和影院后，我选择电影或影院来改变电影播放或影院播放电影.

如果我选择了一个选项来显示与选项相关的信息

下面是我的html代码

​

代码语言：javascript
复制
$(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.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);
  });
});
代码语言：javascript
复制
<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="thirdselectbox"></select>
</div>

​

如何更改在第一个下拉列表中选择电影名称以更改另一个下拉列表中的相关影院名称.

更改电影名称，并显示电影放映的地方……

javascript
jquery
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-12-14 12:40:03

​

代码语言：javascript
复制
$(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: 'ABC1',
          theaterName: 'PVR3'
        },
        {
          movieName: 'GHI3',
          theaterName: 'Theatre5'
        }
      ]
    },

    {
      cityName: 'Ongole',
      value: "Ongole",
      data: 'currently not available'
    }
  ];
  $("#selectCity").on('change', function() {
    var locations = cityData.filter(c => c.cityName === $(this).val())[0].data;
    var locationString2 = '';
    console.log(locations)
    $.each(locations, function(i, item) {
        locationString2 += '<option value="' + item.movieName + '">' + item.movieName + '</option>';
    });
    $('#thirdselectbox').html(locationString2);
    createTheaterDropdown();
});
   $("#thirdselectbox").on('change', function() {
     createTheaterDropdown();

   });
   function createTheaterDropdown(){
     var locations = cityData.filter(c => c.cityName === $('#selectCity').val())[0].data;
      var movie = locations.filter(c => c.movieName === $('#thirdselectbox').val());
      var locationString = '';
      $.each(movie, function(i, item) {
        locationString += '<option value="' + item.theaterName + '">' + item.theaterName + '</option>';
      })

    $('#secondselectbox').html(locationString);
   }
})
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="thirdselectbox"></select>
  <select id="secondselectbox"></select>
</div>

​

您可以在选择“城市名称”之后过滤剧院名称，这里是该名称的代码。

代码语言：javascript
复制
$("#selectCity").on('change', function () {
    var locations = cityData.filter(c => c.cityName === $(this).val())[0].data;
    var locationString2 = '';
    console.log(locations)
    $.each(locations, function (i, item) {
        locationString2 += '<option value="' + item.movieName + '">' + item.movieName + '</option>';
    });
    $('#thirdselectbox').html(locationString2);
    createTheaterDropdown();
});
$("#thirdselectbox").on('change', function () {
    createTheaterDropdown();

});

function createTheaterDropdown() {
    var locations = cityData.filter(c => c.cityName === $('#selectCity').val())[0].data;
    var movie = locations.filter(c => c.movieName === $('#thirdselectbox').val());
    var locationString = '';
    $.each(movie, function (i, item) {
        locationString += '<option value="' + item.theaterName + '">' + item.theaterName + '</option>';
    })

    $('#secondselectbox').html(locationString);
}
票数 1
EN

Stack Overflow用户

发布于 2017-12-14 13:06:33

或者，您可以通过添加一个自定义属性(即：data-theater=item.theaterName )来确保每部电影都与影院相关联。

然后，您可以使用影院下拉列表的更改事件来隐藏/显示相关的电影，而不是不断地重新构建DOM。

​

代码语言：javascript
复制
$(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.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 data-theater="' + item.theaterName + '" value="' + item.movieName + '">' + item.movieName + '</option>';
    });
    $('#secondselectbox').append(locationString);
    $('#thirdselectbox').append(locationString2);
    
    // ensure the movies are initialized correctly based on the current theater
    theaterChanged.call($('#secondselectbox'));
  });

  $("#secondselectbox").on('change', theaterChanged);

  function theaterChanged() {
    var theater = this.value;
    $('#thirdselectbox option').attr('hidden', true);
    $('#thirdselectbox option[data-theater="' + theater + '"]').attr('hidden', false);
    $("#thirdselectbox option[hidden!=hidden]").eq(0).prop("selected", true);
  }
});
代码语言：javascript
复制
<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="thirdselectbox"></select>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47813237

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档