Question

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

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

对于选择选项下拉列表，我看到了很多答案，但是对于标记占位符却没有。

BrokeredMessage

//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>

更新下面的答案是可行的，但它正在另一个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>

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

1 个答案: