如何操作两个选择字段并动态更改textContent

Question

我有两个选择。第一个显示“ fem”的“男性”，第二个显示名称，取决于选择的“ mal”或“ fem”选项。它运作良好。但是我想在新的div中消除这些价值。但是，我只能访问“ mal”或“ fem”选项。我问这是因为这是。但是如何在此textContent中添加名称？例如，使用textContent'male James'或'fem Lola'创建一个div？请参见下面的代码和链接

const namesArr = {
     male: ['Tom', 'James', 'John', 'Jimmy', 'Angelo', 'Patrick', 'Ron'],
     fem: ['Jemma', 'Samantha', 'Lola', 'Penny', 'Mary']
 }

function show(){  
    document.querySelector('#name').textContent = ''
    document.querySelector('.result').textContent = ''

 let val = this.value

  for(let i of Object.keys(namesArr)) {

    if(val === i) {

   namesArr[i].forEach(elem => {
         newElem.value = i
         newElem.textContent = elem;
         document.querySelector('#name').style.display = 'inline-block'
         document.querySelector('#name').append(newElem)             
         document.querySelector('.result').textContent = 
         this.options[this.selectedIndex].textContent               
       });
     }
  }
}
document.querySelector('#sex').addEventListener('click', show);

Link to JSFiddle

Answer 1

也需要添加事件侦听器名称选择

jsfiddle