Yakuza
Yakuza

Reputation: 33

How to change Selector dropdown content

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.sstatic.net/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>

Upvotes: 2

Views: 39

Answers (1)

Yakuza
Yakuza

Reputation: 33

import React, { useState } from "react";
import { Container } from "react-bootstrap";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Button from "react-bootstrap/Button";

const UserLogin = () => {
  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 >

      <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>
                  Select Options
                </option>

                <option value="1">Leave</option>
                <option value="2">Salary</option>
                <option value="2">Others</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 above details are correct"
              feedback="You must agree before submitting."
              feedbackType="invalid"
            />
          </Form.Group>
          <Button type="submit">Apply</Button>
        </Form>
      </Row>



    </Container>
  );
};

export default UserLogin;

Upvotes: 1

Related Questions