# Dropdown list with already selected value

**URL:** <https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997>\
**Category:** How-to Discussions\
**Created:** [June 20, 2016, 2:47pm UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997 "2016-06-20T14:47:54Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Priso\_Gold](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Priso\_Gold](https://forums.fusetools.com/u/Priso_Gold)\
**Post date:** [June 20, 2016, 2:47pm UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/1 "2016-06-20T14:47:54Z")

</div>

I am working on a dropdown list. But I have a problem about set already selected value into dropdown list when dropdown list is displayed first time. I dont know how to do it. Can you help me ?

Here is my component “selectbox” code:

With:

```auto
- <object ux:Property="Values" /> : dropdown Options
- <object ux:Property="Value" /> : already selected option

```

```auto
<Panel ux:Class="SelectBox" ZOffset="1">
  <object ux:Property="Values" />
  <object ux:Property="Value" />
  <UserEvent ux:Name="onChange" />

  <JavaScript>
    function handleSelect(args) {
      onChange.raise({
        id: args.data.id
      });
    }

    module.exports = {
      handleSelect: handleSelect
    }
  </JavaScript>

  <Panel ux:Class="DropdownOption" ux:Name="self" Height="45" Margin="40,0" Padding="10,0">
      <string ux:Property="Text" />
      <Rectangle Layer="Background">
          <SolidColor ux:Name="bgCol" Color="Snow" />
      </Rectangle>
      <Text ux:Name="tCol" Alignment="CenterLeft" Value="{Property self.Text}" FontSize="16" Margin="10,0"/>
      <WhileHovering>
          <Change bgCol.Color="#db5b05" />
          <Change tCol.TextColor="#FFF" />
      </WhileHovering>
  </Panel>

  <Rectangle CornerRadius="5" Alignment="VerticalCenter">
    <StackPanel>
      <Each Items="{Property this.Values}">
          <DropdownOption Text="{name}" Clicked="{handleSelect}" ZOffset="2" Opacity="1"/>
      </Each>
    </StackPanel>
  </Rectangle>
  <Rectangle Background="#000" Opacity="0.8" Layer="Background" Clicked="{handleOverlayClicked}"/>
</Panel>

```

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/F5qUroIB6oHG-legacy-files-498Oi0wR5Qdv5CJT-aL6VoyYsWOQW__VRhvKH-Zyo.png)

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 20, 2016, 5:58pm UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/2 "2016-06-20T17:58:21Z")

</div>

Hi!

All properties are available as observables in JS, so you can do something like:

```auto
this.Value.value = "this is the value";

```

---

<div class="post-metadata">

**Author:** ![Priso\_Gold](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Priso\_Gold](https://forums.fusetools.com/u/Priso_Gold)\
**Post date:** [June 21, 2016, 12:14am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/3 "2016-06-21T00:14:34Z")

</div>

Hi Anders !

I don’t quite understand. My question is “how to display option is already selected before. Example: the option is already selected before will have background orange and text color is white like above image”

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 21, 2016, 12:39am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/4 "2016-06-21T00:39:34Z")

</div>

Do a remap in your JS:

```auto
module.exports = {

    values : this.Values.map(function(v) {
        return {
            name: v.name,

            isSelected: Observable(function() {
                return v === this.Value.value;
            })
        }
    }

    ... other exports
}

```

And then bind to `{values}` instead of `{Property this.Values}`, and do a `<WhileTrue Value="{isSelected}">`

---

<div class="post-metadata">

**Author:** ![Priso\_Gold](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Priso\_Gold](https://forums.fusetools.com/u/Priso_Gold)\
**Post date:** [June 21, 2016, 10:20am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/5 "2016-06-21T10:20:44Z")

</div>

Ok. I got it. But when I do that “values” just return null or I console.log(this.Value.length) it return 0. I don’t know why?

My proccess is:

- create an variable in js file:

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/YBaDANozshY1-legacy-files-YGjCXgbjtxy9Plrs-rA20J6E69Pqqq1eO_JyIi9OR.png)

- in .ux file I get that variable and pass it into a component class

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Ua8PFE23Lvo3-legacy-files-dTWPk9C15ZSuS2sR-BLDiZj1f5kHF6vgrahP4NzCq.png)

- in component class file .ux I try console.log values which I passed from ux page obove but it return 0 and null

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/W8vll5uWtVHq-legacy-files-jeguAOk8WA6LKZFE-g50YU8sM95x3b1kbqtRliQIy.png)

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 21, 2016, 4:46pm UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/6 "2016-06-21T16:46:15Z")

</div>

Hi,

As JS and UI are async, the properties will be null initially, you have to wait for a value to arrive:

```auto
this.SomeProperty.onValueChanged(function(newValue) {
    ...
});

```

---

<div class="post-metadata">

**Author:** ![Priso\_Gold](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Priso\_Gold](https://forums.fusetools.com/u/Priso_Gold)\
**Post date:** [June 22, 2016, 12:33am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/7 "2016-06-22T00:33:53Z")

</div>

Yeah. But:

```auto
var values = Observable();

this.Values.onValueChanged(function(OptionValues) {
  values = OptionValues
  console.log('values in: ', values.length) // return 2 
});

console.log('values out: ', values.length) // return 0 when out function

```

Have way to fix this problem? I need to use it outside function in Javascript tag

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 22, 2016, 1:26am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/8 "2016-06-22T01:26:41Z")

</div>

Nope. You can’t access the value before it is available. The function is called later when the property value is ready. As long as you rely on observable logic, you should never need the value though.

Can you please explain what you are trying to do? That way we can help find the best way to acheive it.

---

<div class="post-metadata">

**Author:** ![Priso\_Gold](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Priso\_Gold](https://forums.fusetools.com/u/Priso_Gold)\
**Post date:** [June 22, 2016, 1:46am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/9 "2016-06-22T01:46:15Z")

</div>

Yes. I am trying do a dropdown list with already selected option as I mentioned at this topic.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 22, 2016, 2:22am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/10 "2016-06-22T02:22:35Z")

</div>

Yes, then do as I proposed earlier: [https://www.fusetools.com/community/forums/permalink/014b7678-c020-4e6d-a93b-31accdc963c1](https://www.fusetools.com/community/forums/permalink/014b7678-c020-4e6d-a93b-31accdc963c1)

Also, check out this video where I build a dropdown list step by step:

[https://www.youtube.com/watch?v=-jk3jNQzE4U](https://www.youtube.com/watch?v=-jk3jNQzE4U)

---

<div class="post-metadata">

**Author:** ![Priso\_Gold](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Priso\_Gold](https://forums.fusetools.com/u/Priso_Gold)\
**Post date:** [June 23, 2016, 2:48am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/11 "2016-06-23T02:48:47Z")

</div>

Hi !

Sorry to take your time. I’m a newbie Fusetools so have many issuses I can’t resolve. So I need help from you.

This issue we discussed yesterday about create a dropdown option with already selected options .

This is my code after I viewed your video on youtube.

[https://bitbucket.org/snippets/trannamhcm/XxorG](https://bitbucket.org/snippets/trannamhcm/XxorG)

Please go through and tell me why the values I get to handle in … from component always are null.

If have any question, let ask me. Hope to hear answer from you. Thanks so much !

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 23, 2016, 2:57am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/12 "2016-06-23T02:57:10Z")

</div>

Hi!

It seems you forgot to do `.inner()` on your observable properties. Does that help?

```auto
var selected = self.Selected.inner();
var values = self.Values.inner();

```

---

<div class="post-metadata">

**Author:** ![Priso\_Gold](https://avatars.discourse-cdn.com/v4/letter/p/3ec8ea/32.png) [@Priso\_Gold](https://forums.fusetools.com/u/Priso_Gold)\
**Post date:** [June 23, 2016, 3:34am UTC](https://forums.fusetools.com/t/dropdown-list-with-already-selected-value/4997/13 "2016-06-23T03:34:56Z")

</div>

I additional .inner() but it throw an error

```auto
LOG: InternalError: JavaScript dispatching error: Fuse.Scripting.ScriptException: Name: ScriptError
    Error message: Uncaught TypeError: Cannot read property 'id' of undefined
    File name: Components/SelectBox.ux
    Line number: 22
    Source line: if(v.id && selected.value){
    JS stack trace: TypeError: Cannot read property 'id' of undefined

```

seem like values is null

if release inner(), code run ok, not error but values = null