Member Avatar for Dcurvez

Can anyone tell me how I can let the user add their choices to a combobox? I have preset choices in each one, but would like to be able to let them add their own choices as well.

  • 3 Contributors
  • 3 Replies
  • 90 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Dcurvez

Dani AI

Generated

Thanks to for confirming the WinForms approach worked; and were on the right track for desktop apps. For WinForms: allow typing by using the ComboBox style that accepts text, then append the confirmed text to the control's item collection (for example when Enter is pressed or an Add button is clicked). Persist user choices to user settings or a small file if they should survive an app restart.

For web pages, a simple, standards-based option is the HTML5 datalist element with an input. The snippet below shows a datalist with an input, an Add button that creates a new option only if the value is nonempty and not a duplicate, and client-side persistence using localStorage. The code creates option elements (not innerHTML) to avoid XSS and trims/validates input.

<label for="combo">Choice:</label>
<input id="combo" list="choices" autocomplete="off">

<datalist id="choices">
  <option value="Option A">
  <option value="Option B">
</datalist>

<button id="addBtn">Add</button>

<script>
(function(){
  const input = document.getElementById('combo');
  const list = document.getElementById('choices');
  const addBtn = document.getElementById('addBtn');

  function addValue(val){
    val = (val || '').trim();
    if(!val) return;
    const exists = Array.from(list.options).some(o => o.value === val);
    if(exists) return;
    const opt = document.createElement('option');
    opt.value = val;
    list.appendChild(opt);
    save();
  }

  addBtn.addEventListener('click', () => { addValue(input.value); input.value = ''; });

  function save(){
    const values = Array.from(list.options).map(o => o.value);
    localStorage.setItem('comboChoices', JSON.stringify(values));
  }

  function load(){
    const raw = localStorage.getItem('comboChoices');
    if(!raw) return;
    JSON.parse(raw).forEach(v => {
      const opt = document.createElement('option');
      opt.value = v;
      list.appendChild(opt);
    });
  }

  load();
})();
</script>

Notes: datalist works in modern browsers but behaves differently than desktop comboboxes; for full control build a custom dropdown. Use localStorage for single-browser persistence or send values to a server for cross-device storage. See datalist - MDN and Window.localStorage - MDN.

Recommended Answers

All 3 Replies

Member Avatar for farooqaaa

You can use:

comboBox1.Items.Add("test item");
Member Avatar for NPDA

well , you can by using text box ....

private void lstBoxEvents_SelectedIndexChanged
                                         (object sender, System.EventArgs e)
        {

//            this.txtBoxResult.Text = this.lstBoxEvents.Text;   
                                           // Single selection option
            string result  =" ";
            foreach(string activity  in lstBoxEvents.SelectedItems)
                result  += activity + "    ";
            this.txtBoxResult.Text = result;
        }

        private void btnNew_Click(object sender, System.EventArgs e)
        {
            lstBoxEvents.Items.Add(txtBoxNewAct.Text);
            txtBoxNewAct.Clear( );
Edited by kvprajapati because: Added [code] tags. For easy readability, always wrap programming code within posts in [code] (code blocks).
Member Avatar for Dcurvez

okay got it working,,, Thank yaz :)

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.