如何綁定國家更改國際電話輸入

Question

我在頁面中使用國家代碼插件名稱intlTelInput.js （這個我的演示頁面）我想在國家選擇更改時清空電話（輸入文件）

<div class="demo">
    <h3>Demo</h3>
    <div class="iti iti--allow-dropdown">
        <div class="iti__flag-container">
            <div class="iti__selected-flag" role="combobox" aria-owns="country-listbox" tabindex="0"
                title="Algeria (&#8235;الجزائر&#8236;&lrm;): +213">
                <div class="iti__flag iti__dz"></div>
                <div class="iti__arrow"></div>
            </div>
        </div><input type="tel" id="phone" class="form-control" autocomplete="off" data-intl-tel-input-id="0"
            placeholder="0551 23 45 67">
    </div>
</div>

我試過：

$(".iti__selected-flag").bind('change', function(event) {
         $('#phone').val('')
      });

下面的代碼將使電話歸檔值為空（單擊時，但在選擇另一個國家/地區項目完成后我希望它為空）

$(function(){
      $("#phone").bind('change', function(event) {
         $('#phone').val('')
      });
    })

但它不起作用

Answer 1

有一種本地方法可以綁定國家/地區更改intl-tel-input ：

var input = $("#phone");
input.intlTelInput();

input.on("countrychange", function() {
  input.val('')
});

Answer 2

var input = document.querySelector("#phone1");        
   window.intlTelInput(input, {        
     initialCountry: "In", //change according to your own country.      
     utilsScript: "assets/js/utils.js",        
});