如何在不重新加载页面的情况下加载下拉菜单中的选定选项？

Question

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

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

换句话说，如何在下拉菜单中设置所选选项，因为我知道值是多少。

<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 阶段：

第二阶段：

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 中的内联脚本标签说不，因为它会破坏 turbolinks，因为你有一个持久的浏览器会话。

您也可以直接在服务器端设置初始 selected 值，以避免输入更改时 select 突然更改。

如何在不重新加载页面的情况下加载下拉菜单中的选定选项？

How to load selected option in dropdown menu without having to reload the page?

html

javascript

html-select

ruby-on-rails

option