diff --git a/components/doc/dropdown/index.js b/components/doc/dropdown/index.js
index f091e12435..16d4d0fea7 100644
--- a/components/doc/dropdown/index.js
+++ b/components/doc/dropdown/index.js
@@ -187,17 +187,17 @@ export class DropdownDemo extends Component {
             <div className="dropdown-demo">
                 <div className="card">
                     <h5>Basic</h5>
-                    <Dropdown value={this.state.selectedCity1} options={this.cities} onChange={this.onCityChange} optionLabel="name" placeholder="Select a City" />
+                    <Dropdown value={this.state.selectedCity1} options={this.cities} onChange={this.onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
 
                     <h5>Editable</h5>
-                    <Dropdown value={this.state.selectedCity2} options={this.cities} onChange={this.onCityChange2} optionLabel="name" editable />
+                    <Dropdown value={this.state.selectedCity2} options={this.cities} onChange={this.onCityChange2} optionLabel="name" optionValue="code" editable />
 
                     <h5>Grouped</h5>
                     <Dropdown value={this.state.selectedGroupedCity} options={this.groupedCities} onChange={this.onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
                         optionGroupTemplate={this.groupedItemTemplate} />
 
                     <h5>Advanced with Templating, Filtering and Clear Icon</h5>
-                    <Dropdown value={this.state.selectedCountry} options={this.countries} onChange={this.onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
+                    <Dropdown value={this.state.selectedCountry} options={this.countries} onChange={this.onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
                         valueTemplate={this.selectedCountryTemplate} itemTemplate={this.countryOptionTemplate} />
 
                     <h5>Virtual Scroll (100000 Items)</h5>
@@ -381,17 +381,17 @@ const DropdownDemo = () => {
         <div className="dropdown-demo">
             <div className="card">
                 <h5>Basic</h5>
-                <Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" placeholder="Select a City" />
+                <Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
 
                 <h5>Editable</h5>
-                <Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" editable />
+                <Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" optionValue="code" editable />
 
                 <h5>Grouped</h5>
                 <Dropdown value={selectedGroupedCity} options={groupedCities} onChange={onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
                     optionGroupTemplate={groupedItemTemplate} />
 
                 <h5>Advanced with Templating, Filtering and Clear Icon</h5>
-                <Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
+                <Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
                     valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
 
                 <h5>Virtual Scroll (100000 Items)</h5>
@@ -574,17 +574,17 @@ const DropdownDemo = () => {
         <div className="dropdown-demo">
             <div className="card">
                 <h5>Basic</h5>
-                <Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" placeholder="Select a City" />
+                <Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
 
                 <h5>Editable</h5>
-                <Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" editable />
+                <Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" optionValue="code" editable />
 
                 <h5>Grouped</h5>
                 <Dropdown value={selectedGroupedCity} options={groupedCities} onChange={onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
                     optionGroupTemplate={groupedItemTemplate} />
 
                 <h5>Advanced with Templating, Filtering and Clear Icon</h5>
-                <Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
+                <Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
                     valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
 
                 <h5>Virtual Scroll (100000 Items)</h5>
@@ -771,17 +771,17 @@ const DropdownDemo = () => {
         <div className="dropdown-demo">
             <div className="card">
                 <h5>Basic</h5>
-                <Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" placeholder="Select a City" />
+                <Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
 
                 <h5>Editable</h5>
-                <Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" editable />
+                <Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" optionValue="code" editable />
 
                 <h5>Grouped</h5>
                 <Dropdown value={selectedGroupedCity} options={groupedCities} onChange={onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
                     optionGroupTemplate={groupedItemTemplate} />
 
                 <h5>Advanced with Templating, Filtering and Clear Icon</h5>
-                <Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
+                <Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
                     valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
 
                 <h5>Virtual Scroll (100000 Items)</h5>
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 1e3448926a..5c007868f7 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -600,11 +600,12 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
 
     const createHiddenSelect = () => {
         const placeHolderOption = <option value="">{props.placeholder}</option>;
-        const option = selectedOption ? <option value={selectedOption.value} selected>{getOptionLabel(selectedOption)}</option> : null;
+        let selectedValue = selectedOption ? getOptionValue(selectedOption) : "";
+        const option = selectedOption ? <option value={selectedValue}>{getOptionLabel(selectedOption)}</option> : null;
 
         return (
             <div className="p-hidden-accessible p-dropdown-hidden-select">
-                <select ref={inputRef} required={props.required} name={props.name} tabIndex={-1} aria-hidden="true">
+                <select ref={inputRef} required={props.required} value={selectedValue} name={props.name} tabIndex={-1} aria-hidden="true" onChange={(e) => selectedValue = e.target.value}>
                     {placeHolderOption}
                     {option}
                 </select>
@@ -762,4 +763,4 @@ Dropdown.defaultProps = {
     onShow: null,
     onHide: null,
     onFilter: null
-}
\ No newline at end of file
+}
diff --git a/pages/dropdown/index.js b/pages/dropdown/index.js
index 43b3aa5573..ed94ea2374 100644
--- a/pages/dropdown/index.js
+++ b/pages/dropdown/index.js
@@ -175,17 +175,17 @@ const DropdownDemo = () => {
             <div className="content-section implementation dropdown-demo">
                 <div className="card">
                     <h5>Basic</h5>
-                    <Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" placeholder="Select a City" />
+                    <Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
 
                     <h5>Editable</h5>
-                    <Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" editable />
+                    <Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" optionValue="code" editable />
 
                     <h5>Grouped</h5>
                     <Dropdown value={selectedGroupedCity} options={groupedCities} onChange={onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
                         optionGroupTemplate={groupedItemTemplate} />
 
                     <h5>Advanced with Templating, Filtering and Clear Icon</h5>
-                    <Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
+                    <Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
                         valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
 
                     <h5>Virtual Scroll (100000 Items)</h5>