How to change Selector dropdown content-CodePudding

i want to change the content in selector. i have 2 options in selector, when i select option 1, it should show first two radio buttons and when i select 2nd option it should show other 2 radio buttons. you can see in the image below

(https://i.stack.imgur.com/pKfAS.jpg)

 <Form noValidate validated={validated} onSubmit={handleSubmit}>
          <Row className="mb-3">
            <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Request Type</Form.Label>
              
              <Form.Select
                onChange={onChange}
                aria-label="Default select example"
              >
                <option defaultValue disabled>
                  Select Options
                </option>

                <option value="1">Leave</option>
                <option value="2">Salary</option>
              </Form.Select>
            </Form.Group>
          </Row>

          {selectValue && <div> {selectValue} </div>}

          <div>
            <Form.Check label="Half Day" className="mb-3" type="radio" />
            <Form.Check label="Full Day" className="mb-3" type="radio" />
          </div>

          <div>
            <Form.Check label="50% Salary" className="mb-3" type="radio" />
            <Form.Check label="Full Salary" className="mb-3" type="radio" />
          </div>
          

          <Form.Group className="mb-3">
            <Form.Check
              required
              label="I solemnly affirm that all the details"
              feedback="You must agree before submitting."
              feedbackType="invalid"
            />
          </Form.Group>
          <Button type="submit">Apply</Button>
        </Form>
      </Row>
    </Container>

CodePudding user response：

To show the radio buttons based on the selected option in the dropdown, you can use an if statement inside the return statement of your component. You can use the selected value from the dropdown to determine which radio buttons to show.

For example:

import { Form, Col, Button, Row } from "react-bootstrap";

const Example = () => {
  const [validated, setValidated] = useState(false);
  const [selectValue, setSelectValue] = useState("");

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

  const onChange = (event) => {
    setSelectValue(event.target.value);
  };

  return (
    <Container className="mt-4">
      <Row>
        <Form noValidate validated={validated} onSubmit={handleSubmit}>
          <Row className="mb-3">
            <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Request Type</Form.Label>

              <Form.Select
                onChange={onChange}
                aria-label="Default select example"
              >
                <option defaultValue disabled>
                  Select Options
                </option>

                <option value="1">Leave</option>
                <option value="2">Salary</option>
              </Form.Select>
            </Form.Group>
          </Row>

          {selectValue === "1" && (
            <div>
              <Form.Check label="Half Day" className="mb-3" type="radio" />
              <Form.Check label="Full Day" className="mb-3" type="radio" />
            </div>
          )}

          {selectValue === "2" && (
            <div>
              <Form.Check label="50% Salary" className="mb-3" type="radio" />
              <Form.Check label="Full Salary" className="mb-3" type="radio" />
            </div>
          )}

          <Form.Group className="mb-3">
            <Form.Check
              required
              label="I solemnly affirm that all the details"
              feedback="You must agree before submitting."
              feedbackType="invalid"
            />
          </Form.Group>
          <Button type="submit">Apply</Button>
        </Form>
      </Row>
    </Container>
  );
};

Here, theselectValue state variable is used to determine which radio buttons to show. If selectValue is equal to 1, the first set of radio buttons will be shown. If selectValue is equal to 2, the second set of radio buttons will be shown.