HTML-Select options having array as value

Question

I'm using Ruby on Rails as backend and using React JS for part of the front end. I have a select (dropdown) with options and I want the value of each of the options to be a Javascript array. This code is inside of a render function for the React Class.

...
<select defaultValue={<%= sections['All sections'] %>}  ref="sectionSelect">
    <% sections.each do |name, ids| %>
        <option value={<%= ids %>}><%= name %></option>
    <% end %>
</select>
...

sections is a hash with strings pointing to arrays of numbers. Sort of formatted like this:

{
    'All sections' : [1, 2, 3, 4, 5],
    'Section A' : [1],
    'Section B' : [2],
    'Section C' : [3],
    'Section D' : [4],
    'Section E' : [5]
}

When I run the above code I get something like this in the HTML:

<select>
    <option value="1,2,3,4,5">All sections</option>
    <option value="1">Section A</option>
    <option value="2">Section B</option>
    <option value="3">Section C</option>
    <option value="4">Section D</option>
    <option value="5">Section E</option>
</select>

When I pause a javascript function in debug mode in my browser, I can run this.refs.sectionSelect.state.value in the browser console and it will give me an array ([1, 2, 3, 4, 5]) because of the default value for React. But once I change the select to another option, I get a string representation of the array ("1,2,3,4,5") instead of the array itself.

Is there a way to make it so the values are actually arrays and not just strings? And if so, how?

Please let me know if you need any more information. I've added everything I think is relevant.

Thanks in advance if you know how to solve this.

Mr Lister · Accepted Answer · 2016-02-22 10:44:33Z

1

ActiveModel has a JSON serializer that can be utilized for just this purpose. You are looking for to_json, and html_safe.

Your code

<select defaultValue={<%= sections['All sections'] %>}  ref="sectionSelect">
<% sections.each do |name, ids| %>
    <option value={<%= ids %>}><%= name %></option>
<% end %>
</select>

Should be

<select defaultValue=<%= sections['All sections'] %>  ref="sectionSelect">
<% sections.each do |name, ids| %>
    <option value=<%= ids.to_json.html_safe %>><%= name %></option>
<% end %>
</select>

in order to get

<select>
  <option value="[1,2,3,4,5]">All sections</option>
  <option value="[1]">Section A</option>
  <option value="[2]">Section B</option>
  <option value="[3]">Section C</option>
  <option value="[4]">Section D</option>
  <option value="[5]">Section E</option>
</select>

Warning: Using html_safe without escaping will leave you open to XSS vulns when inside <script> tags

edited Feb 22, 2016 at 10:44

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Feb 15, 2016 at 19:25

Adrian Sosa

463 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Inman Over a year ago

I've tried using that before, and just tried it again. And it seems to not work. I look at the source javascript file in the dev tools and looks like it worked but it seems like the React js is doing something to it and it ends up being a string in the final HTML. (edit: I'm only working on this in my spare time, so haven't looked at it since monday, in case you're wondering why so long for a response)

Collectives™ on Stack Overflow

HTML-Select options having array as value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related