Dependent dropdown choose stores the ID in the database instead of the value that i picked

You have to simply take the variable as text and pass the choice values as text which you are using in labels.

a!localVariables(
  local!selectedDepartment,
  local!labels: {
    "Corporate",
    "Engineering",
    "Finance",
    "Human Resources",
    "Professional Services",
    "Sales"
  },
  a!sectionLayout(
    label: "Example: Cascading Dropdowns",
    contents: {
      a!dropdownField(
        label: "Department",
        choiceLabels: local!labels,
        choiceValues: local!labels,
        /*pass same as labels of whatever you want to store*/
        placeholder: "-- Select a Department -- ",
        value: local!selectedDepartment,
        saveInto: { local!selectedDepartment,  }
      ),
      
    }
  )
)

Are you sure you want to store the text though? In general storing the ID will better support changes in the future - for instance, if you update the value, all the places that reference the ID will now immediately receive the new value. Plus, it's easier to do things like define relationships or reporting if you have more consistent data that references an ID.

thanks Ujjwal. it works 

It's true, I don't think about that