尝试更新下拉选择元素而不使用普通JavaScript重新加载

我没有找到我需要的，所以这是我的问题。顺便说一句，我必须在这个项目中使用香草Javascript。我正在尝试创建所有者并将其添加到“”下拉菜单。好消息是我可以将它添加到下拉列表中，但坏消息是我必须重新加载我的页面，才能看到带有新创建的所有者名称的下拉列表更新。问题是如何在不刷新页面的情况下动态更新下拉列表仅供参考，我无法使用jquery进行此操作。

以下是我的一些相关代码：

这是我的html：

<form id = "owner_form">
        <div>
          <label for='name'>Owner Name:</label>
          <input type='text' id='name' name='name' placeholder="John Doe" >
        </div>
        <div>
          <label for='phone_number'>Phone Number:</label>
          <input type='text' id='phone_number' name='phone_number' placeholder="John Doe" >
        </div>
        <div>
          <label for='real_estate_agent'>Listing Agent:</label>
          <input type='text' id='real_estate_agent' name='real_estate_agent' placeholder="John Doe">
        </div>
        <div>
          <input type='submit' id='owner_submit' value='Submit'/>
        </div>
      </form>

      //The target dropdown is in a seperate form but I will only show the relevant part
      
       <form id = "listing_form">
      <div>
        <label for='name'>Owner Name:</label>
        <select id='owner_id' name='owner_id' >
          
        </select>
      </div>

我不确定此部分是否相关，但这是我的获取请求，用于从我的来源获取我的所有者，并在下拉列表中显示他们

fetch(OWNERS_URL)
    .then((resp) =>{
        if(resp.status !== 200){
            console.warn('Looks like there was a problem. Status Code: ' + 
          resp.status);  
        return;    
        }
        resp.json().then((data) =>{  
            
        
            for (let i = 0; i < data.length; i++) {
                let option;
                option = document.createElement('option');
              
                option.text = data[i].name;
                // debugger
                option.value = data[i].id; 
                dropdown.add(option); 
                console.log(option)
            }    
          }); 

    }
    )
    .catch(function(err) {  
        console.error('Fetch Error -', err);  
      });

fetch（所有者\u URL）
。然后（（resp）=>{
如果（各自状态！==200）{
console.warn（'看起来有问题。状态代码：'+
各自的地位）；
返回；
}
resp.json（）.then（（数据）=>{
for（设i=0；i

---

我研究了很多例子，因为它们大多是Jquery，我还不熟悉，这就是为什么我很难找到我需要的东西。在此方面的任何帮助都将不胜感激。谢谢您

如上文评论中所述，您只需更改以下内容：

option = owner_obj.name;

option.textContent = owner_obj.name;

具体如下：

option = owner_obj.name;

option.textContent = owner_obj.name;

---

如上所述，您只需更改以下内容：

option = owner_obj.name;

option.textContent = owner_obj.name;

具体如下：

option = owner_obj.name;

option.textContent = owner_obj.name;

---

当您提交表单时，是否会在console.log（owner_obj）中获得一个日志？@spangle，它会记录我提交的内容和所有键值。我以前在提交数据之前遇到过一些问题，在提交数据之前需要尝试更新选项=owner_obj.name；为option.textContent=owner_obj.name@斯潘格……这确实奏效了。把它作为一个答案贴出来，我肯定会给它一个哑巴！谢谢你，先生！！我的意思是指拇指，对不起，当你提交表单时，你会得到控制台的日志吗？log（owner_obj）？@spangle，它会记录我提交的所有键值。我以前在提交数据之前遇到过一些问题，在提交数据之前需要尝试更新选项=owner_obj.name；为option.textContent=owner_obj.name@斯潘格……这确实奏效了。把它作为一个答案贴出来，我肯定会给它一个哑巴！谢谢你，先生！！对不起，我是指拇指