Dynamic Dropdown List in react js

• Create Components folder under src folder
• Add DynamicDropdownList.js file and add below Code

import React from "react";

class DynamicDropdownList extends React.Component {

constructor(props) {

super(props);

this.state = {

technology: [

{ name: ".net", id: 1 },

{ name: "java", id: 2 },

{ name: "React", id: 3 },

{ name: "PHP", id: 4 }

],

SelectedTechnologyName: "",

SelectedTechnologyValue: ""

};

}

handleChange = e => {

this.setState({

SelectedTechnologyValue: e.target.value

});

};

render() {

let optionTemplate = this.state.technology.map(v => (

<option key={v.id} value={v.id}>

{v.name}

</option>

));

return (

<div>

Dynamic Dropdown List EXP

<br />

<br />

Select Technology:

<select

value={this.state.SelectedTechnologyValue}

onChange={this.handleChange}

>

<option value="select">Select</option>

{optionTemplate}

</select>

<br />

Selected Technology Value:<p>{this.state.SelectedTechnologyValue}</p>

</div>

);

}

}

export default DynamicDropdownList;

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import DynamicDropdownList from "./components/DynamicDropdownList";

function App() {

return (

<div className="App">

<DynamicDropdownList />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Reusable Dropdown component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create Dropdown folder under common folder
• Add index.js file under Dropdown folder and add below Code

import React from "react";

const Dropdowm = ({

  id,

  name,

  options,

  title,

  handleChange,

  selectedValue

}) => (

  <div>

    <h1>{title}</h1>

    <select id={id} name={name} onChange={handleChange} value={selectedValue}>

      {options.map(option => (

        <option key={option.value} value={option.value}>

          {option.label}

        </option>

      ))}

    </select>

  </div>

);

export default Dropdowm;

• Add style.css file and add below Code

// CSS Code here

• Go to Components Folder and Add DropdownEXP.js file and add below Code

import React from "react";

import Dropdown from "./common/Dropdown/index";

const options = [

  { label: "Location 1", value: 1 },

  { label: "Location 2", value: 2 },

  { label: "Location 3", value: 3 },

  { label: "Location 4", value: 4 },

  { label: "Location 5", value: 5 },

  { label: "Location 6", value: 6 }

];

class DropdownEXP extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      SeletedVal: ""

    };

  }

  handleChange = e => {

    var value = e.target.value;

    this.setState({

      SeletedVal: value

    });

  };

  render() {

    return (

      <div className="App">

        <Dropdown

          id={"ddl1"}

          name={"ddllocation"}

          options={options}

          title={"Locations"}

          handleChange={this.handleChange}

          selectedValue={this.state.SeletedVal}

        />

      </div>

    );

  }

}

export default DropdownEXP;

• Open App.js file and update code as below

import React from 'react';

import DropdownEXP from './Components/DropdownEXP'

function App() {

  return (

    <div>

      <DropdownEXP/>

    </div>

  );

}

export default App;

Output:

Picker DropDown example in react native

• Create Components folder under src folder
• Add PickerDropDown.js file and add below Code

import React from "react";

import { Picker, View, StyleSheet, Text } from "react-native";

export default class PickerDropDown extends React.Component {

  state = { choosenLabel: "", choosenindex: "" };

  render() {

    return (

      <View style={styles.container}>

        <Text>Picker DropDown Example</Text>

        <Text>{this.state.choosenLabel}</Text>

        <Text>{this.state.choosenindex}</Text>

        <Picker

          selectedValue={this.state.choosenLabel}

          onValueChange={(itemValue, itemIndex) =>

            this.setState({ choosenLabel: itemValue, choosenindex: itemIndex })

          }

        >

          <Picker.Item label="Hello" value="word1" />

          <Picker.Item label="React" value="word2" />

          <Picker.Item label="Native" value="word3" />

          <Picker.Item label="How" value="word4" />

          <Picker.Item label="are" value="word5" />

          <Picker.Item label="you" value="word6" />

        </Picker>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: "center",

    flexDirection: "column"

  }

});

• Open App.js file and update code as below\

import React from 'react';

import { View,StyleSheet } from 'react-native';

import PickerDropDown from './src/Component/PickerDropDown'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <PickerDropDown/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Dropdown events in javascript

1.  onChange – Occurs after a value is selected from the dropdown.
2.  onFocus – Occurs after the dropdown gains focus. It triggers the JavaScript event before the dropdown is opened.
3. onBlur – Occurs after a value is selected from the dropdown and the focus is removed from it.
4. onKeyDown – Occurs after a keyboard key is released when the dropdown is opened or when the dropdown has the focus.
5. onKeyDown – Occurs after a keyboard key is pressed when the dropdown is opened or when the dropdown has the focus.
6. onClick – Occurs after a dropdown is clicked.
7. onMouseOver – Occurs after the dropdown is hovered with the mouse cursor.
8. onMouseDown – Occurs after the dropdown is clicked. Works similar to the onClick event but it triggers the JavaScript event before the dropdown values are expanded.
9.  onMouseUp – Occurs after the dropdown is clicked and the click button is released.

get value from dropdown (select) control in java script

alert(document.getElementById('dropdown1').value);

How to get the selected value of dropdownlist using JavaScript

Html Code

<select id="ddlViewBy">
            <option value="1">test1</option>
            <option value="2" selected="selected">test2</option>
            <option value="3">test3</option>
 </select>

Javascript code

var e = document.getElementById("ddlViewBy");

var strUser = e.options[e.selectedIndex].value;

capture dropdownlist value in javascript | Example : Fetch or get asp.net dropdownlist control value in javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function getValue() {
         
            var ddl = document.getElementById("<%=DropDownList1.ClientID%>");
            var ddlValue = ddl.options[ddl.selectedIndex].value;
            alert(ddlValue);

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem Value="1">IT</asp:ListItem>
            <asp:ListItem Value="2">Accounts</asp:ListItem>
            <asp:ListItem Value="3">Operations</asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Get DropDown Selected Value" OnClientClick="return getValue();" />
    </div>
    </form>
</body>
</html>

Result: