CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
swapnil solanke
swapnil solanke

Reputation: 258

Select Option dropdown taking time to close specifically in Chrome

I have two select option buttons on single web page but on different tabs. I want to change the other one button value on change of any one button and assign it to some element like span in example code. All things are working perfectly but it just taking time to close dropdown when i am changing value. in firefox there is no problem

jsfiddle

My HTML Code

<select class="select one" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select><br><br><br>
<select class="select two">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br><br><br>
 <span class="value"></span>

JQuery

var lang =  $('select.one').val();
$('span.value').text(lang);

$('select.select').change(function(){
            lang = $(this).val();
            $('span.value').text(lang);
            if ($(this).hasClass('one')) {
                    $('.two').val($(this).val()).trigger('change'); 
            }
            else{
                $('.one').val($(this).val()).trigger('change'); 
                }

        });

Thanks in advance

Upvotes: 4

Views: 656

Answers (3)

gunslingor
gunslingor

Reputation: 1476

I spent 8 hours dealing with a simple HTML selection option in react. It was like there was a 1 second forced delay in any operation on the select. I updated chrome and it was solved, didn't happen in firefox.

I think chrome auto-installs updates and just sits there in a stupid state until the browser is restarted, the first brains to go seem to be the select operation. I think I've seen this condition before in chrome, but its rare.

Upvotes: 0

Jai
Jai

Reputation: 74738

You can try this instead:

var lang = $('.select.one').val();
$('.value').text(lang);

$('.select').change(function (e) {
    $('.select').val(this.value);
    $('.value').text(this.value);
});

The issue was .trigger() method, that was traversing up to the dom for lookup and setting the values to each elem again and again.

Check the updated fiddle.

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

fixed jsFiddle demo

It's cause you're concurrently triggering changes. Cool that down, this is all you need:

var lang = $('select.one').val();
$('span.value').text(lang);

$('select.select').change(function () {
  lang = this.value;
  $('span.value').text(lang);
  $('.select').val(lang);
});

Upvotes: 1

Related Questions