使用javascript在输入字段中获取选定的下拉值而不是占位符

Question

我想要带有单选按钮的下拉菜单，当我单击字段时需要显示该按钮，当我单击外部并在输入字段中获取所选值时隐藏。我有部分工作代码。

1. 下拉菜单打开后，我无法隐藏它。
2. 我需要输入字段中的选定值，而不是我拥有的占位符值。

我看到很多选择选项下拉列表的答案，但标签占位符没有。

//Not sure why the above function is not hiding the dropdown
RadioDdOnclick() {
  var x=document.getElementById("radiobtn");
  if (x.style.display==="none") {
    document.getElementById('RadioDd').style.visibility='hidden'; //i tried style.display ='none';
  }
  else {
    document.getElementById('RadioDd').style.display='block';
  }
}

<div className="inputWithIcon" onClick={this.RadioDdOnclick} id="radiobtn">
  <input className="inputBlock" id="radioSelect" type="text" placeholder="choose one" />
  <i className="fa fa-angle-down" />
</div>

<div className={ "BudgetRadioDd"} id={ "RadioDd"} style={{display: 'none'}}>
  <fieldset>
    <h4>options to choose</h4>
    <div>
      <label><input type="radio" id="1"/>option 1</label>
    </div>
    <div>
      <label> <input type="radio" id="2" />option 2</label>
    </div>
    <div>
      <label><input type="radio" id="3"/>option 3</label>
    </div>

  </fieldset>

</div>

//css code here
    .input[type=text]{
  width:100%;
  border:2px solid #aaa;
  border-radius:4px;
  margin:8px 0;
  outline:none;
  padding:8px;
  box-sizing:border-box;
  transition:.3s;
}

.inputWithIcon{
  position:relative;
}

.inputWithIcon i{
  position:absolute;
  right: 3%;
  top: 0;
  font-size: 25px;
  padding: 20px 8px;
  color:#c69937;
  transition:.3s;
}

更新 下面的答案是有效的，但它正在另一个 div 组件中呈现无线电值。

寻找更好的解决方案..

添加查看问题的链接：https://stackblitz.com/edit/react-feubq6?file=index.js

Answer 1

为了简单起见，我更新了您的代码并将其简化为 HTML。请检查：

function RadioDdOnclick(event) {
  const hovered = document.querySelectorAll(':hover');

  if (hovered[hovered.length - 1].type !== 'radio') {
    const x = document.querySelector('#RadioDd');
    const toggleMap = {
      none: 'block',
      block: 'none'
    };
  
    x.style.display = toggleMap[x.style.display];
  }
}

document.querySelectorAll('[type=radio]').forEach(r => {
  r.onclick = _ => {
    if (r.checked) {
      document.querySelector('#radioSelect').value = r.value;
    }
    document.querySelector('#RadioDd').style.display = 'none';
  }
});

<div class="inputWithIcon" id="radiobtn">
  <input className="inputBlock" 
         id="radioSelect" 
         type="text" 
         onClick="RadioDdOnclick(event)" 
         onBlur="RadioDdOnclick(event)" 
         placeholder="choose one" />
  <i className="fa fa-angle-down" />
</div>

<div class="BudgetRadioDd" id="RadioDd" style="display: none">

  <fieldset>
    <h4>options to choose</h4>
    <div>
      <label>
        <input name="budget" type="radio" id="1" value="option 1"/>
        option 1
      </label>
    </div>
    <div>
      <label> 
        <input name="budget" type="radio" id="2" value="option 2"/>
        option 2
      </label>
    </div>
    <div>
      <label>
        <input name="budget" type="radio" id="3" value="option 3"/>
        option 3
      </label>
    </div>
  </fieldset>

</div>