从具有相同类名的分离下拉列表中获取价值

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()更改，因此您需要以其他方式组织代码。 将onchange事件添加到您的下拉列表中，并且仅添加AJAX调用。

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="tab_select"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> </ul> <div class="tabs"> <div id="tab1" class="tab"> <h3> Tab 1 content </h3> <p> <select name="city" class="city"> <option value="">Select city</option> <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> </p> <p class="result"> -result comes here </p> </div> <div id="tab2" class="tab"> <h3> Tab 2 content </h3> <p> <select name="city" class="city"> <option value="">Select city</option> <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> </p> <p class="result"> -result comes here </p> </div> <div class="spinner"> </div> </div> 

Answer 2

只需使用：selected伪选择所有选择的选项，然后按值对其进行过滤。 这很干净

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

然后，您可以将其捕获到变量中，并检查length是否大于0。（因此，您有一个选定的audi选项）。