Modifying select values in dropdown list using JavaScript-CodePudding

I have created two select menus in React that consist of the same option values. When a user selects option 1 from the first list (or second), that option should be removed/hidden from the second menu so a user doesn't have the opportunity to have duplicate options selected. These options are mapped out as an array of objects. As I'm still new to programming I'm unsure of the best way to approach this problem.

I attempted to apply a filter method to update the list options. I expected it to list all option values that were !== to the first option selected, however arrive at a typeError and haven't been able to move past this.

I found this link here is the same as what I am trying to do but the code is quite old and as I'm still new to programming I'm unsure how to refactor it:

https://stackoverflow.com/questions/26137309/remove-selected-option-from-another-select-box

Would really appreciate any advice / assistance.

CodePudding user response：

selectedOptions.forEach((selection) => {
   const filteredOptions = options.filter((option) => option.id !== selection.id)
   setOptions(filteredOptions);
}

options: your global option state/object that you use for your selections.

If you can provide a code snippet i can help you further but first try to implement this.

CodePudding user response：

If you are getting a typeerror it will be better to share the error and snippet. But for having two select options that displays same options at start but when one is selected the option is removed from the second list dynamically. For this i will recommend maintain a state for 2 drop-down lists .Say list1 and list2. When you have selected the input from any of the dropdown a click handler method should be called.Which then updates the two lists values here you can use filter to filter out values and customise list however you want. This will trigger rerender of the compenents and i guess you will get your desired outcome there. Just for performance shake and code and logic splitting make a new component containing all this logic with the dropdowns.

CodePudding user response：

You can declare two state variables to store the selected value of each dropdown and implement filters for the listing based on the state value.

const options = [
    { name: "Option1", value: "option1" },
    { name: "Option2", value: "option2" },
    { name: "Option3", value: "option3" }
  ];

  const [selectedValue1, setSelectedValue1] = useState("");
  const [selectedValue2, setSelectedValue2] = useState("");

  return (
    <div className="App">
      <div className="select-wrapper">
        <span>Dropdown 1</span>
        <select
          className="select-dropdown"
          onChange={(e) => setSelectedValue1(e.target.value)}
          value={selectedValue1}
        >
          {options
            .filter((x) => x.value !== selectedValue2)
            .map((opt, key) => (
              <option key={key} value={opt.value}>
                {opt.name}
              </option>
            ))}
        </select>
        <span>Dropdown 2</span>
        <select
          className="select-dropdown"
          onChange={(e) => setSelectedValue2(e.target.value)}
          value={selectedValue2}
        >
          {options.map((opt, key) => (
            <option key={key} value={opt.value}>
              {opt.name}
            </option>
          ))}
        </select>
      </div>
    </div>
  );

Please refer this for a sample implementation for single select dropdowns that I have written: https://codesandbox.io/s/cranky-liskov-o07jo0?file=/src/App.js