javascript - How can I sort drop-down menu items alphabetically? - Stack Overflow

admin管理员组

文章数量:1305628

Is there any way to display options in an alphabetical order in the drop-down menu of Material-UI?

I know that arrays can be sorted simply using arr.sort(). However, if I do const options = [...].sort(), then I still see unsorted values in the drop-down menu.

const options = [
  {label:"B",value:8033.86},
  {label:"A",value:483.93},
  {label:"Z",value:1246.3},
  {label:"C",value:145.0},
  {label:"E",value:244.5}
]

<Grid item xs={true}>
  <FormControl
      className={this.props.styles.formControl}
      margin="normal">
      <InputLabel shrink htmlFor="distanceTarget-label-placeholder">
          Target:
      </InputLabel>
      <Select
        onChange={(event) => this.props.handleChange("distanceTarget", event)}
        value={this.props.state.distanceTarget}
        input={<Input name="distanceTarget" id="distanceTarget-label-placeholder" />}
        displayEmpty="true"
        name="distanceTarget"
      >
      {options && options.length && options.map((option, i) => {
          return <MenuItem value={option.value} key={i}>{option.label}</MenuItem>
      })}
      </Select>
  </FormControl>
</Grid>

Is there any way to display options in an alphabetical order in the drop-down menu of Material-UI?

I know that arrays can be sorted simply using arr.sort(). However, if I do const options = [...].sort(), then I still see unsorted values in the drop-down menu.

const options = [
  {label:"B",value:8033.86},
  {label:"A",value:483.93},
  {label:"Z",value:1246.3},
  {label:"C",value:145.0},
  {label:"E",value:244.5}
]

<Grid item xs={true}>
  <FormControl
      className={this.props.styles.formControl}
      margin="normal">
      <InputLabel shrink htmlFor="distanceTarget-label-placeholder">
          Target:
      </InputLabel>
      <Select
        onChange={(event) => this.props.handleChange("distanceTarget", event)}
        value={this.props.state.distanceTarget}
        input={<Input name="distanceTarget" id="distanceTarget-label-placeholder" />}
        displayEmpty="true"
        name="distanceTarget"
      >
      {options && options.length && options.map((option, i) => {
          return <MenuItem value={option.value} key={i}>{option.label}</MenuItem>
      })}
      </Select>
  </FormControl>
</Grid>

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Aug 4, 2019 at 17:06 ScalaBoyScalaBoy 3,3921414 gold badges5252 silver badges9696 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

here a simple way to sort the array of objects and you can read the documentation

const options = [
  {label:"B",value:8033.86},
  {label:"A",value:483.93},
  {label:"Z",value:1246.3},
  {label:"C",value:145.0},
  {label:"E",value:244.5}
]

console.log(options.sort((a, b) => (a.label > b.label) ? 1 : -1))

Material-UI is about styles, not logic. First of all, you need to sort your options.

    for (const item in options) {
     console.log(options[item].label)
    }

Its first steps. The second you should try yourself.

When you're dealing with an Array of Objects, you need to tell what determines which one es first:

function sortAlphabeticallyAscending(a,b){
    if(a.label < b.label) return -1;
    else if (a.label > b.label) return 1;
    else return 0;
}

options.sort(sortAlphabeticallyAscending);

basically, return -1 if you want to say that the index of a is lower than b (i.e. a es first), return 1 if you want to say that b es first, and 0 if you don't want to change the order

See the section pareFunction in the docs...

You have to define the sorting logic as your input array is an array of objects.

More info can be found here

const options = [
  {label:"B",value:8033.86},
  {label:"A",value:483.93},
  {label:"Z",value:1246.3},
  {label:"C",value:145.0},
  {label:"E",value:244.5}
];
const objComparator = function(a, b) {
  if (a.label < b.label) {
    return -1;
  }
  if (a.label > b.label) {
    return 1;
  }
  return 0;
};

options.sort(objComparator);

本文标签： javascriptHow can I sort dropdown menu items alphabeticallyStack Overflow