具有多个的MVC下拉列表不与服务器值绑定

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

var data = [
  { value: 1, text: 'Option 1' },
  { value: 2, text: 'Option 2' },
  { value: 3, text: 'Option 3' }
];

// 动态生成下拉列表
var select = document.createElement('select');
for (var i = 0; i < data.length; i++) {
  var option = document.createElement('option');
  option.value = data[i].value;
  option.text = data[i].text;
  select.appendChild(option);
}

// 将生成的下拉列表添加到页面中的某个元素中
document.getElementById('container').appendChild(select);

import React, { useState } from 'react';

const Dropdown = () => {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  );
};