Question

嗨，我最近一直在玩jquery。我最初有三个带有城市名称的按钮，并使用简单的jquery .load函数将数据输入到另一个单独的div中。

<script>
$(document).ready(function(){
    $(".London").click(function(){
        $("#div1 h2").load("London.txt");
    });
    $(".NewYork").click(function(){
        $("#div1 h2").load("NewYork.txt");
    });
    $(".Shanghai").click(function(){
        $("#div1 h2").load("Shanghai.txt");
    });
});
</script>

我现在要更改此设置，并使用选择框执行相同的操作，但是尝试此操作不起作用。

  <select class="Select">
    <option value="" disabled selected hidden>Select a City</option>
    <option value="NewYork" class="NewYork">New York</option>
    <option value="Shanghai" class="Shanghai">Shanghai</option>
    <option value="London" class="London">London</option>
  </select>

Answer 1

您将必须使用change中的select事件。所以试试这个

<script>
$(document).ready(function(){
    $(".Select").change(function(){
        if($(this).val() === "London") { //load London.txt } 
        else if($(this).val() === "NewYork") { //load NewYork.txt }
        else if($(this).val() === "Shanghai") { //load Shanghai.txt }
    });
});
</script>

Answer 2

使用change的{{1}}事件

<select>

$(function() {
  var h2 = $('#div1').find('h2');
  $('.Select').on('change', function(e) {
    var city = $(this).val();
    h2.text('City changed to:' + city);
    var url = city + '.txt';
    h2.load(url, function(resp, status, req) {
      if ('error' === status) {
        h2.text('Failed to load url: ' + url);
      }
    });
  });
});

Answer 3

您对选择器所做的事情是错误的。 <option>元素在被选中时将其value属性赋予<select>，因此，如果您使用

$(".Select").value

选择一个选项后，它将使用所选选项的value。这是我固定代码的方式：

$(".Select").on("change", function(){
    if ($(".Select").value == "London") {
        $("#div1 h2").load("London.txt");
    } else if ($(".Select").value == "NewYork") {
        $("#div1 h2").load("NewYork.txt");
    } else if ($(".Select").value == "Shanghai") {
        $("#div1 h2").load("Shanghai.txt");
    }
});

选择选择选项后，将数据加载到div中

3 个答案: