Member Avatar for sidereal

Hi all,

I have a dropdown and a textbox and I want to be able to change the textbox to a dropdown control, after a certain value in the dropdown is selected.
I have a problem in changing the controls from textbox to dropdown.


Any help???

  • 5 Contributors
  • 5 Replies
  • 204 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by venkythaniks

Dani AI

Generated

Keeping both controls in the DOM and toggling which one is visible/active is the simplest, most robust approach. That matches ’s conclusion and expands on ’s hidden-combo idea. Reloading the page (as suggested) is unnecessary for this, and switching a textbox to "multiline" (as proposed) does not produce a true <select> and breaks semantics, validation and accessibility. The pattern below preserves user input, keeps server-side submission predictable, and is friendly to assistive tech.

Key rules to follow: give both controls the same name so the server expects one field; when swapping, set disabled=true on the hidden control and disabled=false on the visible one so only the active value is submitted; when switching from textbox → select, add the typed value to the select as an option if it’s not already present; update required/validation attributes and aria-hidden as appropriate; call focus() on the newly visible control to keep keyboard flow.

A minimal vanilla-JS example (HTML + JS):

<select id="trigger">
  <option value="">--choose--</option>
  <option value="useSelect">Use dropdown</option>
</select>

<input id="txt" name="field" type="text" />
<select id="sel" name="field" style="display:none" disabled>
  <option value="">--pick--</option>
  <option value="A">A</option>
</select>

<script>
const trigger = document.getElementById('trigger');
const txt = document.getElementById('txt');
const sel = document.getElementById('sel');

trigger.addEventListener('change', () => {
  if (trigger.value === 'useSelect') {
    if (txt.value) {
      let opt = Array.from(sel.options).find(o => o.value === txt.value);
      if (!opt) sel.add(new Option(txt.value, txt.value), 0);
      sel.value = txt.value;
    }
    txt.disabled = true; txt.style.display = 'none';
    sel.disabled = false; sel.style.display = '';
    sel.focus();
  } else {
    sel.disabled = true; sel.style.display = 'none';
    txt.disabled = false; txt.style.display = '';
    txt.focus();
  }
});
</script>

Common mistakes to avoid: leaving the hidden control enabled (duplicate/incorrect submission), not preserving a user-entered value, and forgetting to toggle validation attributes. For non-JS fallback, have the server accept either free text or a known option. This approach keeps UX smooth, accessible, and easy to validate.

Recommended Answers

All 5 Replies

Member Avatar for MidiMagic

Load a new page which looks similar, but has the dropdown instead of the textbox.

Member Avatar for Fungus1487

Hi all,

I have a dropdown and a textbox and I want to be able to change the textbox to a dropdown control, after a certain value in the dropdown is selected.
I have a problem in changing the controls from textbox to dropdown.


Any help???

ok this could be a long winded approach to what your after, why not use Javascript to create a Hidden ComboBox Which when the user selects your special choice in the main ComboBox will hide the current text box and show the Hidden ComboBox and vice versa when the result isnt selected. There are alot of tutorials out there that show the basics of this.

Member Avatar for sidereal

Thanks a lot for the suggestions. I figured that the easiest way will be having two controls and switching between the textbox and the dropdown. Meanwhile hiding the other and vice versa.
It was a pretty simple javascript!

Thanks !

Member Avatar for jitenR

Hi all,

I have a dropdown and a textbox and I want to be able to change the textbox to a dropdown control, after a certain value in the dropdown is selected.
I have a problem in changing the controls from textbox to dropdown.


Any help???

Hi
tyr this one
TextBox1.TextMode = TextBoxMode.MultiLine;
this change the mode of the textbox to multi line
it's show like drop down list

let me know this is u needed

Member Avatar for venkythaniks

Thanks a lot for the suggestions. I figured that the easiest way will be having two controls and switching between the textbox and the dropdown. Meanwhile hiding the other and vice versa.
It was a pretty simple javascript!

Thanks !

Could you please provide the javascript for this solution. Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.