console 命令行工具 X clear

console

import { h, Component, render } from 'preact';

class DoubleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        { value: "1", text: "Option 1" },
        { value: "2", text: "Option 2" },
        { value: "3", text: "Option 3" },
        { value: "4", text: "Option 4" },
        { value: "5", text: "Option 5" }
      ],
      selectedOptions: []
    };
    this.moveOption = this.moveOption.bind(this);
    this.moveAllOptions = this.moveAllOptions.bind(this);
  }

  moveOption(fromList, toList, option) {
    const options = this.state[fromList].filter(o => o.value !== option.value);
    const selectedOptions = [...this.state[toList], option];
    this.setState({ [fromList]: options, [toList]: selectedOptions });
  }

  moveAllOptions(fromList, toList) {
    const options = this.state[fromList];
    const selectedOptions = [...this.state[toList], ...options];
    this.setState({ [fromList]: [], [toList]: selectedOptions });
  }

  render() {
    return (
      <div className="row">
        <div className="col-md-5">
          <h5>Available options</h5>
          <select multiple className="form-control">
            {this.state.options.map(option =>
              <option key={option.value} value={option.value}>{option.text}</option>
            )}
          </select>
          <div className="mt-2">
            <button className="btn btn-secondary"
              disabled={this.state.options.length === 0}
              onClick={() => this.moveAllOptions("options", "selectedOptions")}>
              &gt;&gt;
            </button>
            <button className="btn btn-secondary"
              disabled={this.state.options.length === 0}
              onClick={() => this.moveOption("options", "selectedOptions", this.state.options[0])}>
              &gt;
            </button>
            <button className="btn btn-secondary"
              disabled={this.state.selectedOptions.length === 0}
              onClick={() => this.moveOption("selectedOptions", "options", this.state.selectedOptions[0])}>
              &lt;
            </button>
            <button className="btn btn-secondary"
              disabled={this.state.selectedOptions.length === 0}
              onClick={() => this.moveAllOptions("selectedOptions", "options")}>
              &lt;&lt;
            </button>
          </div>
        </div>
        <div className="col-md-5 offset-md-2">
          <h5>Selected options</h5>
          <select multiple className="form-control">
            {this.state.selectedOptions.map(option =>
              <option key={option.value} value={option.value}>{option.text}</option>
            )}
          </select>
        </div>
      </div>
    );
  }
}

render(<DoubleList />, document.getElementById('root'));

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Double List Select</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/preact@10.5.13/dist/preact.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
  </body>
</html>