0

I want to get value of selected dropdown in my Visacontact() function, below is my code:

  <Fabric className={styles.matrix2}>
    <VirtualizedComboBox
      styles={comboBoxStyles}
      allowFreeform
      autoComplete="on"
      options={this.state.ddlbookcountry}
      dropdownMaxWidth={200}
      useComboBoxAsMenuWidth
      defaultValue="Please select Key"
    />
  </Fabric>
<input className={styles.button} type='Button' value="Visa Contact" onClick={()=>{this.VisaContact()}}></input>
1

You cannot directly access the selected value from combo box control in other function. First, you need to store the selected value in state variable using onChange of combo box selection.

Example:

<VirtualizedComboBox
    styles={comboBoxStyles}
    allowFreeform
    autoComplete="on"
    options={this.state.ddlbookcountry}
    onChange={(e, selectedItem, value) => handleChange(e, selectedItem, value)}
    dropdownMaxWidth={200}
    useComboBoxAsMenuWidth
    defaultValue="Please select Key"
/>

handleChange(e, selectedItem, value) {
    let selectedValue = value ? value : selectedItem.text // Set free form entry or selected option text
    this.setState({bookCountryValue: selectedValue});

}

This is just an example to show you, how you can save selected option in state.

Then in your VisaContact() function, you can access the selected value using this.state.bookCountryValue.

Documentation:

  1. IComboBoxProps interface - onChange
  2. ComboBox

Example code from documentation:

import * as React from 'react';
import { ComboBox, IComboBoxOption, IComboBox, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/index';

const items: IComboBoxOption[] = [
  { key: 'Header1', text: 'First heading', itemType: SelectableOptionMenuItemType.Header },
  { key: 'A', text: 'Option A' },
  { key: 'B', text: 'Option B' },
  { key: 'C', text: 'Option C' },
  { key: 'D', text: 'Option D' },
  { key: 'divider', text: '-', itemType: SelectableOptionMenuItemType.Divider },
  { key: 'Header2', text: 'Second heading', itemType: SelectableOptionMenuItemType.Header },
  { key: 'E', text: 'Option E' },
  { key: 'F', text: 'Option F', disabled: true },
  { key: 'G', text: 'Option G' },
  { key: 'H', text: 'Option H' },
  { key: 'I', text: 'Option I' },
  { key: 'J', text: 'Option J' },
];

const comboBoxStyle = { maxWidth: 300 };

export const ComboBoxControlledExample: React.FC = () => {
  const [selectedKey, setSelectedKey] = React.useState<string | number | undefined>('C');

  const onChange = React.useCallback(
    (ev: React.FormEvent<IComboBox>, option?: IComboBoxOption): void => {
      setSelectedKey(option?.key);
    },
    [setSelectedKey],
  );

  return (
    <ComboBox
      style={comboBoxStyle}
      selectedKey={selectedKey}
      label="Controlled single-select ComboBox (allowFreeform: T)"
      allowFreeform
      autoComplete="on"
      options={items}
      onChange={onChange}
    />
  );
};

3
  • It's work but getting Id and even my combox show empty when I change value – kumar Feb 22 at 2:38
  • Can you show us what you have passed in the options (this.state.ddlbookcountry)? Also, you can use .text instead of .key in above code (see updated answer). – Ganesh Sanap Feb 22 at 4:49
  • Also, in order to save the selection back to combo box, you need to set the selectedKey property of combo box. – Ganesh Sanap Feb 22 at 5:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.