Highlight the Option option to close it in Chrome

Question

I have two selection buttons on the same web page, but on different tabs. I want to change another value of one button when changing any one button and assign it to some element, for example span in the code example. Everything works fine, but it just takes time to close the drop-down list when I change the cost. there are no problems in firefox

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

Answer 1

fixed jsFiddle demo

This means that you are launching changes at the same time. Stop it, that’s 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);
});

Answer 2

:

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

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

---

.trigger(), dom .

.