使用React实现的多选多级下拉列表框

React multiselect field

react, select, widget

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4997
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const { Component } = React;
const { render, findDOMNode } = ReactDOM;

class MultiSelect extends Component {
  constructor(props) {
    super(props);
   this.state = {
     selected: [],
     open: false
   };
  }
  handleChange(e) {
    const select = findDOMNode(this.refs.selectWrapper);
    const selected = select.querySelectorAll('input:checked');
    const realSelect = select.parentNode.parentNode.querySelectorAll('[selected]');
    const values = Array.prototype.map.call(selected, el => {
      return {
        name: el.value,
        id: el.id
      }
    });
    realSelect[0].value = values.map( value => {
      return value.id
    }).join(',');
    this.setState({
      selected: values,
      open: false
    });
  }
  buildGroup(group) {
    return group.options.map( item => {
      return (
        <li>
          <input
            onChange={::this.handleChange}
            type="checkbox" 
            id={item.id} 
            value={item.name}/>
          <label 
            htmlFor={item.id} 
            className="item-label">
            { item.name }
          </label>
        </li>
      )
    });
  }
  toggleMenu() {
    this.setState({
      open: !this.state.open
    });
  }
  render() {
    const {options} = this.props;
    const {selected, open} = this.state;
    return (
      <div ref="selectWrapper" className={classNames('select-wrapper',{
          open: open
        })}>
        {selected && 
          <div className="select-value" onClick={::this.toggleMenu}>
            {(selected.length < 1) &&
              <span className="placeholder">
                All
              </span>
            }
            {selected.map( el => {
            return (
              <span key={el.id}>
              <label 
                htmlFor={el.id}>
                { el.name }
              </label>
             </span>
             )})}
           </div>
         }
        {options && 
         <div className="checkbox-wrapper" onClick={::this.toggleMenu}>
         {options.map( group => {
            return (
              <ul>
                <label>{group.group}</label>
                {this.buildGroup(group)}
              </ul>
             )
          })}
        </div>
        }
      </div>
    );    
  }
};

编译

CSS

html {
    font-size: 12px;
}
body {
    background-image: -webkit-linear-gradient(top left, #323870 0%, #000 100%);
    background-image: linear-gradient(top left, #323870 0%, #000 100%);
    font-family: 'Helvetica', sans-serif;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100vh;
    font-weight: 200;
}
[multiselect] {
    position: relative;
}
[multiselect]:after {
    display: none;
}
[multiselect] select {
    display: none;
}
.form-wrapper {
    margin: 0 auto;
    background: #c9e0dc;
    box-shadow: 0 0 20px rgba(22, 20, 20, 0.8);
    padding: 2rem;
    margin: 0 10%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.form-wrapper .react-mount {
    width: 100%;
}
.form-wrapper .react-mount input[type="checkbox"] {
    display: none;
}
.form-wrapper .select-wrapper .checkbox-wrapper {
    max-height: 0;
    background-color: #fff;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.form-wrapper .select-wrapper.open .checkbox-wrapper {
    max-height: 300px;
    overflow: auto;
    padding: 1em;
}
.form-wrapper .select-wrapper.open .select-value:after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}
.form-wrapper .item-label {
    color: #161414;
    font-size: 1rem;
    display: block;
    padding: 1em;
    -webkit-transition: background 0.1s linear;
    transition: background 0.1s linear;
    cursor: pointer;
}
.form-wrapper .item-label:hover,
.form-wrapper .item-label:active,
.form-wrapper .item-label:focus {
    background-color: #c9e0dc;
}
.form-wrapper .select-value {
    border: 1px solid #dddedf;
    display: block;
    padding: 14px 40px 12px 16px;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
}
.form-wrapper .select-value:after {
    content: "\f063";
    font-family: 'FontAwesome', icon;
    position: absolute;
    right: 1em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.form-wrapper .select-value .placeholder {
    font-size: 1.5rem;
    font-weight: bold;
}
.form-wrapper .select-value label {
    padding: 0.5em 1em;
    background-color: #e9f3f1;
    color: #161414;
    font-size: 1.5rem;
    border-radius: 5px;
    display: inline-block;
    margin: 0.25em 0.25em;
}
.form-wrapper .select-value label:first-child {
    margin-left: 0;
}
.form-wrapper .select-value label:after {
    content: 'X';
    font-size: 0.8em;
    margin-left: 1em;
}
label {
    display: block;
    color: #161414;
    font-size: 1.3rem;
    margin: 1em 0;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #dddedf;
    background: #fff;
    display: inline-block;
    padding: 14px 40px 12px 16px;
    border-radius: 5px;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}
select option {
    font-size: 1rem;
}
.form-group {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.form-group .input-group {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    margin: 0 1em;
    position: relative;
}
.form-group .input-group:after {
    content: "\f063";
    font-family: 'FontAwesome', icon;
    position: absolute;
    right: 1em;
    padding-top: 4rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.form-group [type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #88bbb2;
    border-radius: 5px;
    color: #fff;
    border: none;
    padding: 1rem;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 1em auto;
    -webkit-transition: background-color 0.1s ease;
    transition: background-color 0.1s ease;
    -webkit-animation: roll-gradient 0.2s linear infinite alternate;
    animation: roll-gradient 0.2s linear infinite alternate;
    cursor: pointer;
}
.form-group [type="submit"]:hover,
.form-group [type="submit"]:active,
.form-group [type="submit"]:focus {
    outline: none;
    background-color: #518c82;
}

HTML

<div class="form-wrapper">
    <div class="search-form"></div>
    <form>
        <div class="form-group">
            <div multiselect="multiselect" class="input-group">
                <label>Select your Location</label>
                <select name="eventLocations[]" multiple="multiple">
                    <option selected="" value="">All</option>
                    <optgroup label="California">
                        <option value="6431">Berkeley</option>
                        <option value="6453">Los Angeles</option>
                        <option value="6473">San Francisco</option>
                        <option value="6577">Santa Barbara</option>
                    </optgroup>
                    <optgroup label="Colorado">
                        <option value="6442">Denver</option>
                    </optgroup>
                    <optgroup label="District of Columbia (DC)">
                        <option value="6486">District of Columbia (DC)</option>
                    </optgroup>
                    <optgroup label="Florida">
                        <option value="6460">Miami</option>
                    </optgroup>
                    <optgroup label="Illinois">
                        <option value="6437">Chicago</option>
                    </optgroup>
                    <optgroup label="Louisiana">
                        <option value="6465">New Orleans</option>
                    </optgroup>
                    <optgroup label="Massachusetts">
                        <option value="6433">Boston</option>
                        <option value="10342">Martha's Vineyard</option>
                    </optgroup>
                    <optgroup label="Michigan">
                        <option value="6424">Ann Arbor</option>
                        <option value="6445">Detroit</option>
                        <option value="7166">East Lansing</option>
                    </optgroup>
                    <optgroup label="Minnesota">
                        <option value="6481">Twin Cities</option>
                    </optgroup>
                    <optgroup label="New York">
                        <option value="65">New York City</option>
                    </optgroup>
                    <optgroup label="North Carolina">
                        <option value="6427">Asheville</option>
                    </optgroup>
                    <optgroup label="Oregon">
                        <option value="66">Portland</option>
                    </optgroup>
                    <optgroup label="Pennsylvania">
                        <option value="6469">Philadelphia</option>
                        <option value="6470">Pittsburgh</option>
                    </optgroup>
                    <optgroup label="Texas">
                        <option value="6451">Houston</option>
                    </optgroup>
                    <optgroup label="Vermont">
                        <option value="6435">Burlington</option>
                    </optgroup>
                    <optgroup label="Washington">
                        <option value="6477">Seattle</option>
                    </optgroup>
                    <optgroup label="Wisconsin">
                        <option value="6456">Madison</option>
                        <option value="6461">Milwaukee</option>
                    </optgroup>
                    <optgroup label="Australia">
                        <option value="63">Melbourne</option>
                        <option value="64">Sydney</option>
                    </optgroup>
                    <optgroup label="Ireland">
                        <option value="6447">Dublin</option>
                    </optgroup>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <label>Type of Event</label>
                <select name="typesOfEvents">
                    <option selected="" value="">All</option>
                    <option value="52">Mainstage</option>
                    <option value="53">StorySLAM</option>
                    <option value="54">GrandSLAM</option>
                    <option value="55">Special Events</option>
                    <option value="56">Education</option>
                    <option value="57">Community</option>
                </select>
            </div>
            <div class="input-group">
                <label>Date</label>
                <select name="eventDate">
                    <option selected="" value="">All</option>
                    <optgroup label="2016">
                        <option value="201606">June</option>
                        <option value="201607">July</option>
                        <option value="201608">August</option>
                        <option value="201609">September</option>
                        <option value="201610">October</option>
                        <option value="201611">November</option>
                        <option value="201612">December</option>
                    </optgroup>
                </select>
            </div>
        </div>
        <div class="form-group">
            <input type="submit" value="Find Events" class="btn dark centered" />
        </div>
    </form>
</div>

React multiselect field

react, select, widget

编辑器支持Emmet

快捷键

React multiselect field

react, select, widget

使用JS实现的下拉列表框多选标签控件

使用React、MobX和jQuery实现的支付表单模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：