Is there a select-option version of div contenteditable?

Question

I am inserting a small editable select-option in a html form. But i don't want to send it. So i need a select-option version of this

<div contenteditable="true">
  This text can be edited by the user.
</div>

Something like that

<div select="true">
  <div option="true"></div>
  <div option="true"></div>
  <div option="true"></div>
</div>

Is there a an easy way to achieve it without using js?

its not clear what you mean by select-option version. How would you like it to behave? Do you want to choose which div to be made editable? — Gangula, Oct 22 '21 at 15:57
I want the exact behavior of . But i am writing it in form and i don't want to submit it — Kyoko Sasagava, Oct 22 '21 at 15:59
@user1599011 i need to put it inside form that's why i am saying. I thought maybe there is a way to do it in an easier way — Kyoko Sasagava, Oct 22 '21 at 16:04
Why does it need to be inside the form if you don't want to submit it? — mykaf, Oct 22 '21 at 16:05
@user1599011 i will use it to edit the value of textarea that is above it — Kyoko Sasagava, Oct 22 '21 at 16:07
check out this codepen to compare `datalist` with `select`: https://codepen.io/anweshgangula/pen/rNLEprj — Gangula, Oct 22 '21 at 16:07
@Kyoko Sasagava, That doesn't require the elements to be in the same form. — mykaf, Oct 22 '21 at 16:08
@user1599011 i know that. But i want it to show below the textarea tag. The form is long and i want to show which option belongs to which tag so i have to put it inside the form — Kyoko Sasagava, Oct 22 '21 at 16:09
Perhaps look into some css such that it's outside of the form structure but displays within. — mykaf, Oct 22 '21 at 16:10
Or exclude the name attribute and it won't be submitted. https://stackoverflow.com/questions/3008035/stop-an-input-field-in-a-form-from-being-submitted — mykaf, Oct 22 '21 at 16:11
@user1599011 removing it from forms is easier i think. Thanks — Kyoko Sasagava, Oct 22 '21 at 16:13

score 2 · Accepted Answer · answered Oct 22 '21 at 20:19

If you just have a normal select with some options but don't have a name attribute the selected option will not be submitted:

  <select>
  <option>a</option>
  <option>b</option>
  </select>

So the select can be contained within, and formatted as part of, the form element with no problem,

If you have a name attribute but with an empty name string then it seems browsers will submit the value but with nothing before the =

Is there a select-option version of div contenteditable?

1 Answers1