封装一个下拉选组件包含id,did,选择下拉选时，将id赋值给cityId,did复制给CityDid 前端

在前端开发中，封装一个下拉选组件通常涉及到HTML、CSS和JavaScript的配合。假设我们正在创建一个React组件，可以这样实现：

import React, { useState } from 'react';

const DropdownComponent = ({ options, initialValue }) => {
  const [selectedOption, setSelectedOption] = useState(initialValue || {});

  const handleSelectionChange = (event) => {
    const newOption = event.target;
    setSelectedOption({
      cityId: newOption.value, // 当选择项的value属性对应id时，设置cityId
      CityDid: newOption.getAttribute('did'), // 获取did属性并复制到CityDid
    });
  };

  return (
    <div>
      {/* 使用<select>元素创建下拉选项 */}
      <select onChange={handleSelectionChange}>
        {options.map((option, index) => (
          <option key={index} value={option.id} did={option.did}>
            {option.label}
          </option>
        ))}
      </select>

      {/* 显示当前选择的值 */}
      <p>Selected City ID: {selectedOption.cityId}</p>
      <p>City Did: {selectedOption.CityDid}</p>
    </div>
  );
};

// 使用示例:
const cities = [
  { id: '1', did: 'A1', label: '北京' },
  { id: '2', did: 'B2', label: '上海' },
  // ...更多城市选项
];

<DropdownComponent options={cities} initialValue={{ cityId: '1', CityDid: 'A1' }} />

在这个例子中，`DropdownComponent`接收一个城市选项数组`options`和一个初始值对象作为props。当用户在下拉列表中选择一个选项时，`handleSelectionChange`函数会被触发，更新组件内部的状态，并显示所选的`cityId`和`CityDid`。