javascript jQuery如何在模糊另一个输入时获取当前选中的下拉元素

knpiaxh1  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(88)

我想点击input #phone并从所选国家/地区获取当前拨号代码,然后将其放入input #dialCode。
网页:

<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(){ ...

更新:
这是原始代码:
https://cdpn.io/jonmnoj/fullpage/PoqMrRL?#
问题是,当我提交,它不通过拨号代码:+1、+44等
此外,电话输入,也可以改变拨号代码。例如,我可以键入+1或+44,所以下拉". iti__国家列表"不是选择国家代码的唯一方法。
我根据K-Galalem的建议尝试了几种方法,但也没有成功:

$('.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");
  }
});
hs1ihplo

hs1ihplo1#

您可以添加一个CSS类来区分选定的项目,如下所示:

$('.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'));

相关问题