Strange Error with Linked Dropdown

Ask the community
,
1

I have a dynamic page with a multistate box that has 9 states (State1, State2,…State9). My dropdown menu has 9 values (input directly into the dropdown and not from a dataset).

The code I’m running works perfectly, except for my 4th and 8th dropdown options. When I click on those, the dropdown changes, but the muItistate box does not. I have already confirmed that the labels and values for the dropdown and statebox match.

What is causing this?

export function MOSdropdown_click(event) {
if (event.target.value === “MOS Description and Mission” ) {
$w( ‘#MOSstatebox’ ).changeState( “State1” );
}
if (event.target.value === “How Do I Get This MOS?” ) {
$w( ‘#MOSstatebox’ ).changeState( “State2” );
}
if (event.target.value === “Requirements” ) {
$w( ‘#MOSstatebox’ ).changeState( “State3” );
}
if (event.target.value === “MOS School” ) {
$w( ‘#MOSstatebox’ ).changeState( “State4” );
}
if (event.target.value === “Where Do They Go?” ) {
$w( ‘#MOSstatebox’ ).changeState( “State5” );
}
if (event.target.value === “A Day In The Life” ) {
$w( ‘#MOSstatebox’ ).changeState( “State6” );
}
if (event.target.value === “Deployments” ) {
$w( ‘#MOSstatebox’ ).changeState( “State7” );
}
if (event.target.value === “Career Progression” ) {
$w( ‘#MOSstatebox’ ).changeState( “State8” );
}
if (event.target.value === “Transition Considerations” ) {
$w( ‘#MOSstatebox’ ).changeState( “State9” );
}
}

“MOS School” is my fourth item in the menu, and should relate to State4

3045×1469 263 KB

“Career Progression” is the 8th item in my dropdown and should correspond to State8

3120×1525 282 KB

2

You Can Delete and Recreate the Element and Alter Code Accordingly .
This May Work. Because its Strange Error.

630×630 37.6 KB

3

Please post the URL, and explain exactly where and how to see the problem.

4

Yisrael, this is the URL for the dynamic page. Same issue on live site as well as editor’s preview mode.
https://www.beforethecorps.com/moss-1/0111

5

Instead of using this…

export function MOSdropdown_click(event) {
 if (event.target.value === "MOS Description and Mission") {
        $w('#MOSstatebox').changeState("State1");
    }
 if (event.target.value === "How Do I Get This MOS?") {
        $w('#MOSstatebox').changeState("State2");
    }
 if (event.target.value === "Requirements") {
        $w('#MOSstatebox').changeState("State3");
    }
 if (event.target.value === "MOS School") {
        $w('#MOSstatebox').changeState("State4");
    }
 if (event.target.value === "Where Do They Go?") {
        $w('#MOSstatebox').changeState("State5");
    }
 if (event.target.value === "A Day In The Life") {
        $w('#MOSstatebox').changeState("State6");
    }
 if (event.target.value === "Deployments") {
        $w('#MOSstatebox').changeState("State7");
    }
 if (event.target.value === "Career Progression") {
        $w('#MOSstatebox').changeState("State8");
    }
 if (event.target.value === "Transition Considerations") {
        $w('#MOSstatebox').changeState("State9");
    }
}

Try to do it this way…

$w.onReady(()=>{
   $w('#MOSdropdown').onChange((event)=>{console.log("DropDown-Value changed")
      let selectedINDEX = event.target.selectedIndex
      let correspondingSTATE = "State"+String(selectedINDEX+1)
      console.log("Selected-Index: ", selectedINDEX)
      console.log("Selected-Value: ", $w('#MOSdropdown').value)
      $w('#MOSstatebox').changeState(correspondingSTATE)
   })
})

Good luck and happy coding! :wink: (And do not forget to take a look into CONSOLE!)

6

Wow, that is so much more efficient! I just loaded it in, and it works great, except it has the same problem as the original code - the MOS School and Career Progression tabs (4th and 8th choices, respectively) won’t load. I can’t seem to figure out what’s happening to cause that!

7

@beforethecorps
-It could be in your MSB (MultiStateBox) → check all STATE-ID’s !!!
-It could be in your DD (DropDown) → Check all VALUES in your Dropdown.

Everything is written correctly? (Case-Sensitive?/no_spaces or something else?)

Synced LIVE and PREVIEW ???

Wow, that is so much more efficient!
Yes, i like it efficient and flexible! :laughing:

8

@russian-dima Dima, i just realized that the leading “S” in the state was not capitalized for state4 and state8!

Problem solved, and with a much more efficient code snippet!
Большое спасибо

9

@beforethecorps :wink: Не за что

10

The issue was embarassingly simple - case sensitivity! the leading s in State4 and State8 was lowercase, while all the other states had the first letter capitalized.

11

I was assuming it, because i often do the same failures :wink: (sometimes these are even just some little copy&paste-failures , which one ignores and which can cause fatal-errors & bugs and are not to be found easily).