Question

我有5个标签，显示5个州的地理详情。在每个选项卡上都有一个下拉列表，其中列出了这些州的主要城市。默认情况下，所有城市都设置为“总人口”，显示低于下拉列表的实际人口。我有一个每3秒调用一次的功能。因此，当用户更改城市时，该城市的当前人口将显示在下方。

在每个标签上，下拉列表包含课程.city

下面的

是每3秒调用一次的jquery函数

function doCity() {
    var feed =   $.ajax({
        type: 'POST',
        url: '<?php echo base_url('index.php')?>/feed/population',
        data: $('.city').val(),
              // dataType: 'json',
        success: function (feed) {
            $('.current_value_alaska').html(feed); 
            $('.current_value_block2').html(feed); 
            $('.current_value_block3').html(feed); 
            $('.current_value_block4').html(feed);  
        },
        complete: function (feed) {                       
            setTimeout(doCity, interval);
        }
    });
}

HTML

<select name="city" class="city">
    <option value="5">City1</option>
    <option value="12">City2</option>
    <option value="13">City3</option>
    <option value="14">City4</option>
    <option value="15">City5</option>
</select>

<select name="city" class="city">
    <option value="31">City 31</option>
    <option value="32">City 32</option>
    <option value="33">City 33</option>
    <option value="44">City 34</option>
    <option value="35">City 35</option>
</select>

问题是，在第一个标签上，当我更改城市时，显示正确的人口并且每3秒更新一次......但是当我更改城市时，在其他选项卡上它不会显示城市的人口选择..

有人能告诉我这里我做错了什么吗？

Answer 1

由于您在下拉列表中doCity()发生更改，因此您需要以其他方式组织代码。将<{1}}事件添加到您的下拉列表中，而不是将您的AJAX调用添加到其中。

您可以看到它在this Fiddle上运行，相同的代码如下：

onchange

var allTabSelectors = $('.tab_select a');
var allTabs = $('.tab');
var spinner = $('.spinner');
$('.tab_select a').on('click', function(e) {
  e.preventDefault;
  var thisLink = $(this);
  var thisHref = thisLink.attr('href');
  allTabs.hide();
  $(thisHref).show();
  allTabSelectors.removeClass('active');
  thisLink.addClass('active');
});
$('.tab_select a:eq(0)').trigger('click');
$('.city').on('change', function(e) {
  var thisSelect = $(this);
  var thisValue = thisSelect.val();
  var thisTab = thisSelect.closest('.tab');
  var thisResult = thisTab.find('.result');
  spinner.show();
  $.ajax({
    type: 'post',
    url: '/echo/html/',
    data: {
        city: thisValue,
        html: "<p>We posted: " + thisValue + "</p>"
    },
    success: function(feed) {
      thisResult.html(feed);
      spinner.hide();
    },
    error: function(e) {
    	spinner.hide();
    }
  });
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 16px;
}

h3,
p {
  margin: 0 0 10px;
}

.tab_select li {
  display: inline-block;
  border: 1px solid #000;
}

.tab_select li a {
  display: block;
  padding: 5px 10px;
  background: none #ccc;
}

.tab_select li a.active {
  background: none #fff;
}

.tabs {
  border: 1px solid #000;
  padding: 10px 10px 0;
  position: relative;
}

.spinner {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: none rgba(0, 0, 0, .5) center center;
}

.tab {
  display: none;
}

.tab:first-child {
  display: block;
}

Answer 2

只需选择所有选定的选项：selected pseudo，然后按值过滤它们。这是一个凉爽和干净的一个班轮

$('.myclass option:selected').filter("[value=audi]")

然后，您可以在变量中抓取它，并检查长度＆gt; 0.（所以你有一个选定的奥迪选项）。

从具有相同班级名称的{seletected下拉列表中获取价值

2 个答案: