Get value from seletected dropdown with same class class name

Question

I have 5 tabs which shows geographic details of 5 states. on each tab there is a drop down which lists main cities of those states. by default the all cities are set to "Total population" which shows the live population below the drop down. i have a function which is called every 3 seconds. So when the user changes the city the current population for that city will be shown below.

on each tab the dropdown has the class .city

below is the jquery function which is called every 3 seconds

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> 

the problem is, on the first tab when i change the city the correct population is shown and it updates every 3 seconds... but on the other tabs when i change the city it doesn't show the population of the city selected..

can someone tell me what am i doing wrong here?

Answer 1

Since you doCity() on dropdown change, you need to organize your code other way. Add onchange event to your dropdowns and only than do your AJAX calls.

You can see it working on this Fiddle , same code is below:

 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

Simply take all selected options with :selected pseudo, and filter them by value. This is cool and clean one liner

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

Afterwards, you can grab this in a variable, and check if length > 0. (so you have a selected audi option).