如何在下拉菜单中加载所选选项而无需重新加载页面？

Question

我有一个简单的表单，用户可以在其中提交拨号代码和电话号码！在数据库中添加新实例时，它工作正常。但是，我在编辑现有实例时遇到了一些问题。在数据库中，我将dialcode 保存为integer，将phone number 保存为integer（例如213 将存储阿尔及利亚的拨号代码和1234567890 电话号码）

我设法解决了这个问题，但仍然有问题！这按预期工作，但我将不得不重新加载页面以使其执行。下面的代码如何实现一次且仅一次，并且当页面加载时与其余数据（姓名、电子邮件、twitter、电话号码）类似？

换句话说，如何在下拉菜单中设置选定的选项，因为我知道值是什么。

<script type="text/javascript">

  //select tag
  let country_code = document.getElementById("country_code_dropdown");    
  
  //set correct option according to numeric value:
  window.onload = function(){
    //get current dial code value:
    let dialCode = document.getElementById("country_phone_code_input").value; //357

    //Loop through
    Array.from(document.querySelector("#country_code_dropdown").options).forEach(function(option_element) {
        let option_value = option_element.value;

        if(option_value == dialCode){ //if value matches:
          option_element.selected = true; //set <option> to selected: true
          document.getElementById("phone_number_input").innerHTML  = "+" + option_value; //and change span
        }
    });
  };
</script> 

---

第 1 阶段：

---

第 2 阶段：

Answer 1

这听起来像是您尝试设置经典输入绑定并且遇到了 Turbolinks 问题。由于 Turbolinks 使用 ajax 执行页面替换，因此您需要编写幂等事件处理程序，而不是直接将处理程序附加到元素：

function handleCountryPhoneCodeInput(source) {
  let opt = source.form.querySelector(`#country_code_dropdown option[value="${source.value}"]`);
  if (opt) {
    opt.selected = true;
  } else {
    console.log('Computer says no.');
  }
}

document.addEventListener('change', (event) => {
  let el = event.target;
  if (el.matches('#country_phone_code_input')) {
    handleCountryPhoneCodeInput(el);
  } else if (el.matches('#country_code_dropdown')) {
    let target = el.form.querySelector('#country_phone_code_input');
    target.value = el.value;
  }
});

// Set initial value on page load
// Use `turbolinks:load` instead if you are using turbolinks.
window.addEventListener('load', (event) => {
  let el = document.getElementById('country_phone_code_input');
  if (el) { handleCountryPhoneCodeInput(el) };
});

<form>
  <label>
    Access code 
    <input id="country_phone_code_input" name='user[country_phone_code_input]' value="456">
  </label>
  <label>
    Select an access code
    <select id="country_code_dropdown">
      <option value="123">123</option>
      <option value="456">456</option>
      <option value="789">789</option>
    </select>
  </label>
</form>

此代码应放置在您的资产或包中，具体取决于您使用的是 Sprockets 还是 Webpacker。只需对 Rails 中的内联脚本标签说不，因为它会破坏 turbolink，因为你有一个持久的浏览器会话。

你也可以直接在服务器端设置初始选择值，避免输入变化时选择突然改变。