jQuery How to get current selected drop down element when blur on another input-CodePudding

I want to click on input #phone and get the current dial-code from the selected country, and put it in the input #dialCode.

html:

<input id="phone" type="text">
<input id="dialCode" type="text">

jQuery:

// this works fine
$('.iti__country-list li').click(function(){
        $("#dialCode").val($(this).data('dial-code'));
})

// but I want, on #phone blur get the above data and put it in dial-code
$('#phone').blur(function(){ ...

UPDATE:

This is the original code:

https://cdpn.io/jonmnoj/fullpage/PoqMrRL?#

The problem is that when I submit, it doesn't pass the Dial-code: 1, 44, etc.

Also, the phone input, can also change the Dial-code. Ex. I can type 1 or 44, so the drop down " .iti__country-list " is not the only way to select the country code.

I tried a few things based on K-Galalem's suggestions, but no success either:

$('.iti__country-list li').on({
  change: function(){
    $(this).css("background-color", "YELLOW");
    $('.iti__country-list li').removeClass('selected');
    $(this).addClass('selected');
  },
  blur: function(){
    $(this).css("background-color", "BLUE");
    $('.iti__country-list li').removeClass('selected');
    $(this).addClass('selected');
  },
  click: function(){
    $(this).css("background-color", "GREEN");
  }
}); 

$("#phone").on({
  focus: function(){
    $(this).css("background-color", "#F09");
    $('.iti__country-list li').removeClass('selected');
    $(this).addClass('selected');
  },
  change: function(){
    $(this).css("background-color", "#F09");
    $('.iti__country-list li').removeClass('selected');
    $(this).addClass('selected');
  },
  blur: function(){
    $(this).css("background-color", "LIME");
    $("#dialCode").val($('.iti__country-list li.selected').data('dial-code'));
  },
  click: function(){
    $(this).css("background-color", "CYAN");
  }
});

CodePudding user response：

you can add a CSS class to distinguish the selected item like this:

$('.iti__country-list li').click(function(){
        $('.iti__country-list li').removeClass('selected');
        $(this).addClass('selected');
})

$('#phone').blur(function(){ 
        $("#dialCode").val($('.iti__country-list li.selected').data('dial-code'));

CodePudding user response：

Thanks to @freedomn-m suggestions to get the li.selected and to pick the selected directly, I found out that there was actually a selected item in the drop down of the flags, so I selected it directly. I don't know how to give credit though. But here is the code that worked out:

$('#phone').on({
      change: function(){
        $(this).css("background-color", "f09");
        $("#dialCode").val($('.iti__selected-flag').attr("title"));
      },
      blur: function(){
        $(this).css("background-color", "pink");
        $("#dialCode").val($('.iti__selected-flag').attr("title"));
      },
      click: function(){
        $(this).css("background-color", "LIME");
        $("#dialCode").val($('.iti__selected-flag').attr("title"));
      }
    });
    $("#dialCode").val($('.iti__selected-flag').attr("title"));