# Set the dropdownlist to not selected

**URL:** <https://forums.fusetools.com/t/set-the-dropdownlist-to-not-selected/4211>\
**Category:** How-to Discussions\
**Created:** [February 19, 2018, 11:00am UTC](https://forums.fusetools.com/t/set-the-dropdownlist-to-not-selected/4211 "2018-02-19T11:00:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![GFlakes](https://avatars.discourse-cdn.com/v4/letter/g/bbe5ce/32.png) [@GFlakes](https://forums.fusetools.com/u/GFlakes)\
**Post date:** [February 19, 2018, 11:00am UTC](https://forums.fusetools.com/t/set-the-dropdownlist-to-not-selected/4211/1 "2018-02-19T11:00:40Z")

</div>

Hi there,

I want to de-select the dropdown when a button is clicked. It is like return back to it’s original value, Like Select a Country. I happened to use the combox that was shared in through this link: [https://www.youtube.com/watch?v=-jk3jNQzE4U](https://www.youtube.com/watch?v=-jk3jNQzE4U)

Everything is working fine with me but I just can’t return the DropDown to its original value after I click the save button for example.  
Here is my Code:

```auto
          <Rectangle ux:Class="ComboBox" CornerRadius="3" Color="#fff" IconColor="#015055" StrokeColor="#6d6d6d" StrokeWidth="2" Margin="0,10" Alignment="Top">
	<object ux:Property="Options"/>
	<object ux:Property="Selected"/>
	<float4 ux:Property="IconColor" />
		<string ux:Property="Icon" />
				<JavaScript>
			var Observable=require("FuseJS/Observable");
			var self = this;
			var Options=self.Options.inner();
			var selected=self.Selected.inner();
			var isOpen=Observable(false);			
			module.exports={
				isOpen:isOpen,
				Options:Options.map(function(option){
					return{
						title:option,
						isSelected:Observable(function(){
							return selected.value===option;
						}),
						Clicked:function(){					
							selected.value=option;
							if(self.Selected.value instanceof Observable)
							{
								self.Selected.value.value=option;							
							}
							isOpen.value=false;
						}
					}
				}),
				selected:selected,
				toggleOpen:function(){
					isOpen.value=!isOpen.value;
				}
			}
		</JavaScript>			
	      	<Panel ux:Name="header" Clicked="{toggleOpen}" HitTestMode="LocalBoundsAndChildren">			  	
	      		<Text Alignment="CenterLeft" ux:Name="Select" Margin="30,9" Color="#6d6d6d" Value="{selected.NameEn}" />
				<Text Alignment="CenterLeft" ux:Name="IconErr" Margin="9" Color="{ReadProperty IconColor}" FontSize="16" Value="{Property Icon}" Font="FontAwesome" />
	      		<Text Value="&#xf0d7;" Font="FontAwesome" FontSize="20" Color="#ccc" Alignment="CenterRight" Margin="10,5" />
	      		<WhilePressed>
	      			<Change header.Color="#bbb" Duration="1" />
	      		</WhilePressed>
	      	</Panel>
	      	<Panel ux:Name="dropdown" LayoutRole="Inert" Alignment="Top" MaxHeight="300">
	      		<Translation RelativeTo="Size" RelativeNode="this" Y="1" />
	      		<ScrollView>
	      			<StackPanel>
	      				<Each Items="{Options}">						
	      					<Rectangle ux:Name="item" Color="Grn" CornerRadius="3" Clicked="{Clicked}">
	      						<Stroke Offset="1" Color="#fff" Width="1"/>				
	      						<Text Margin="10" Value="{title.NameEn}" Color="#fff" />								 
	      						<WhilePressed>
	      							<Change item.Color="#6d6d6d" Duration="0.05" DurationBack="0.1" />
	      						</WhilePressed>
	      						<WhileTrue Value="{isSelected}">
	      							<Change item.Color="#1a888e" />
	      						</WhileTrue>	      				
	      					</Rectangle>
	      				</Each>
	      			</StackPanel>
	      		</ScrollView>
	      		<WhileFalse Value="{isOpen}">
	      			<Change dropdown.Opacity="0" Duration="0.15" Easing="CubicOut" />
	      			<Change dropdown.Visibility="Hidden" Delay="0.2" />
	      			<Move Y="-300" Duration="0.2" Easing="CubicIn" />
	      		</WhileFalse>
	      	</Panel>
	      </Rectangle>	

```

## I have used the above component here:

```auto
    <App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var Nationality = Observable({NameEn:"USA",ID:1},{NameEn:"Korea",ID:2},{NameEn:"Banama",ID:3},{NameEn:"Qatar",ID:4});
	var NationalitySelect=Observable({NameEn:"Select Nationality",ID:0});
    function ClearDDl()
    {
        Nationality.value=0;
    }
    module.exports={
        Nationality,
        ClearDDl,
        NationalitySelect
    }
    </JavaScript>
    <Panel>
        <ComboBox Alignment="Center" ux:Name="Nations" Icon="&#xf0ac;" Options="{Nationality}" Selected="{NationalitySelect}" >																						
		</ComboBox>
        <Rectangle Width="250" Alignment="Bottom" Clicked="{ClearDDl}" Margin="0,0,0,100" Height="40" CornerRadius="15" Color="#015055">        
        <Text Alignment="Center" Value="Clear" FontSize="16" Color="#fff"/>
        </Rectangle>
         </Panel>
       </App>

```

Any Help?

---

<div class="post-metadata">

**Author:** ![Arturs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arturs/32/582_2.png) [@Arturs](https://forums.fusetools.com/u/Arturs)\
**Post date:** [February 21, 2018, 9:25am UTC](https://forums.fusetools.com/t/set-the-dropdownlist-to-not-selected/4211/2 "2018-02-21T09:25:42Z")

</div>

Hey!

First, if you want something to deselect, you actually need to select something. By default, your `Combobox` have `Selected` property with the `Select Nationality` value from javascript. This is our “deselected” option. To deselect, change the `Selected` value back to `Select Nationality`. If you want to save or validate the selected value, you could check ID value. For example, a user cannot save, if the value is 0.

Here is modified code, to get dropdown “deselected” value on click.

```auto
<App>
  <JavaScript>
  var Observable = require("FuseJS/Observable");
  var Nationality = Observable(
    {NameEn:"USA",ID:1},
    {NameEn:"Korea",ID:2},
    {NameEn:"Banama",ID:3},
    {NameEn:"Qatar",ID:4}
  );
  var NationalitySelect = Observable(
    {NameEn:"Select Nationality",ID:0}
  );
  function ClearDDl() {
      NationalitySelect.value = {NameEn:"Select Nationality",ID:0};
  }
  module.exports = {
      Nationality: Nationality,
      NationalitySelect: NationalitySelect,
      ClearDDl: ClearDDl
  }
  </JavaScript>
  <Rectangle ux:Class="ComboBox" CornerRadius="3" Color="#fff" IconColor="#015055" StrokeColor="#6d6d6d" StrokeWidth="2" Margin="0,10" Alignment="Top">
   <object ux:Property="Options"/>
   <object ux:Property="Selected"/>
   <float4 ux:Property="IconColor" />
   <string ux:Property="Icon" />
     <JavaScript>
       var Observable = require("FuseJS/Observable");
       var self = this;
       var Options = self.Options.inner();
       var selected = self.Selected.inner();
       var isOpen = Observable(false);
       module.exports = {
          isOpen:isOpen,
          Options:Options.map(function(option){
             return{
                title:option,
                isSelected:Observable(function(){
                   return selected.value === option;
                }),
                Clicked:function(){
                   selected.value = option;
                   if(self.Selected.value instanceof Observable)
                   {
                      self.Selected.value.value = option;
                   }
                   isOpen.value=false;
                }
             }
          }),
          selected:selected,
          toggleOpen:function(){
             isOpen.value =! isOpen.value;
          }
       }
    </JavaScript>
    <Panel ux:Name="header" Clicked="{toggleOpen}" HitTestMode="LocalBoundsAndChildren">
       <Text Alignment="CenterLeft" ux:Name="Select" Margin="30,9" Color="#6d6d6d" Value="{selected.NameEn}" />
       <Text Alignment="CenterLeft" ux:Name="IconErr" Margin="9" Color="{ReadProperty IconColor}" FontSize="16" Value="{Property Icon}" Font="Bold" />
       <Text Value="&#xf0d7;" Font="Bold" FontSize="20" Color="#ccc" Alignment="CenterRight" Margin="10,5" />
       <WhilePressed>
          <Change header.Color="#bbb" Duration="1" />
       </WhilePressed>
    </Panel>
    <Panel ux:Name="dropdown" LayoutRole="Inert" Alignment="Top" MaxHeight="300">
       <Translation RelativeTo="Size" RelativeNode="this" Y="1" />
       <ScrollView>
          <StackPanel>
             <Each Items="{Options}">
                <Rectangle ux:Name="item" Color="Green" CornerRadius="3" Clicked="{Clicked}">
                   <Stroke Offset="1" Color="#fff" Width="1"/>
                   <Text Margin="10" Value="{title.NameEn}" Color="#fff" />
                   <WhilePressed>
                      <Change item.Color="#6d6d6d" Duration="0.05" DurationBack="0.1" />
                   </WhilePressed>
                   <WhileTrue Value="{isSelected}">
                      <Change item.Color="#1a888e" />
                   </WhileTrue>
                </Rectangle>
             </Each>
          </StackPanel>
       </ScrollView>
       <WhileFalse Value="{isOpen}">
          <Change dropdown.Opacity="0" Duration="0.15" Easing="CubicOut" />
          <Change dropdown.Visibility="Hidden" Delay="0.2" />
          <Move Y="-300" Duration="0.2" Easing="CubicIn" />
       </WhileFalse>
    </Panel>
  </Rectangle>

  <Panel>
    <ComboBox Alignment="Center" ux:Name="Nations" Icon="&#xf0ac;" Options="{Nationality}" Selected="{NationalitySelect}" />
    <Rectangle Width="250" Alignment="Bottom" Clicked="{ClearDDl}" Margin="0,0,0,100" Height="40" CornerRadius="15" Color="#015055">
      <Text Alignment="Center" Value="Clear" FontSize="16" Color="#fff"/>
    </Rectangle>
   </Panel>
</App>

```

Hope this helps.

---

<div class="post-metadata">

**Author:** ![GFlakes](https://avatars.discourse-cdn.com/v4/letter/g/bbe5ce/32.png) [@GFlakes](https://forums.fusetools.com/u/GFlakes)\
**Post date:** [February 21, 2018, 9:58am UTC](https://forums.fusetools.com/t/set-the-dropdownlist-to-not-selected/4211/3 "2018-02-21T09:58:33Z")

</div>

Just as expected !!!

This worked very well thanks for the heads up, appropriate the help.