无法获取数据列表的选定值答案

【问题标题】：Cannot get selected value of datalist无法获取数据列表的选定值
【发布时间】：2026-01-25 17:50:01
【问题描述】：

我有一个数据列表，并试图获取单击按钮时当前选择的值。我完全按照 Stack Overflow 上其他帖子的建议进行了操作，但它似乎不起作用。在我的代码中，您可以看到我尝试过的内容。它只是不断注销未定义。当我记录长度时，它会正确注销有 5 个选项这是我的 HTML 代码

<form>
     <input list="slots" name="slot"></input>
     <datalist id="slots">
           {
            this.state.slots.map((slot) => <option value={slot.id} >{slot.start_time} - {slot.end_time}</option>)
           }
      </datalist>
      <Button onClick={() => {this.handleAddFacilitator()}}>Submit</Button>
</form>

方法如下：

 handleAddFacilitator(e) {
  console.log($('#slots').val(), "slotID")
  console.log(document.getElementById('slots').value, "second slot")
  console.log(document.getElementById("slots").options.length, "LENGTH")
 }

【问题讨论】：

标签： javascript jquery html reactjs

【解决方案1】：

假设你有一个 select ref 类型

<select ref="slotType">
  <option value="01">one</option>
  <option value="02">two</option>
  <option value="03">three</option>
</select>

您的按钮条目

<Button onClick={this.handleAddFacilitator}>Submit</Button>

handleAddFacilitator() {
  if (this.refs.slotType) {
    console.log("selected option ==>",this.refs.imageType.value);
  }
}

另一种方式：

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'PNG'
    };
    this.handleChange = this.handleChange.bind(this);
    this.print = this.print.bind(this);
  }

  print() {
    if (this.state.value) {
      console.log(this.state.value);
    }
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <div>
        <select ref="slotType" onChange={this.handleChange}>
      <option value="01">one</option>
      <option value="02">two</option>
      <option value="03">three</option>
    </select>
<Button onClick={this.print}>Submit</Button>
      </div
    );
  }
}

【讨论】：

【解决方案2】：

选择发生在输入元素中，而不是数据列表中。你需要给输入一个ID

<input list="slots" name="slot" id="slotsInput"></input>

并在那里查询值：

console.log($('#slotsInput').val(), "slotID")

参见此处：Get selected value in datalist using jQuery

【讨论】：