how to save a data to backend thrhough controller from selecting a dropdown list in the website odoo 12?

Ive been trying to take a user input from the dropdown list and update it to the backend through controller.i will explain my code below,

JS

$(document).ready(function() {

        $(".form-group input").hide() //hide inputs
        $(".edit_save").click(function() {
          var selector = $(this).closest(".form-group")
          var btnText = $(this).text();
          if (btnText === 'Edit') {
            $(this).text('Save');
            $(this).next("button").show(); //hide
            selector.find("form span").hide() //span hide
            selector.find("form input").show() //show inputs
          } else {
            $(this).text('Edit');
            $(this).next("button").hide();
            selector.find("form span").show()
            selector.find("form input").hide()

            var blood_group = document.getElementById("blood_group").value;

            ajax.jsonRpc("/my/health-record-save", 'call', {
                        'sex': sex,
            });
           selector.find("span.blood_group").text(blood_group)
          }

        });

XML

<div class="form-group">
  <form class="form-horizontal" style="bg-light">
     <t>
      <button type="button" class="edit_save">Edit</button>
      <button class="cancel" type="button" style="display:none">Cancel</button>
    </t>
    <div class="col-md text-md-left" style="padding-top:10px">
      <label class="text-secondary" for="blood_group"><strong>Blood group:</strong></label>
          <select name="blood_group" id="blood_group">
               <option>
                    <t t-esc ="hr.blood_group"/>
                </option>
                <option value="o+">O+</option>
                <option value="o-">O-</option>
                <option value="a+">A+</option>
                <option value="a-">A-</option>
                <option value="b-">B-</option>
                <option value="b+">B+</option>
                <option value="ab+">AB+</option>
                <option value="ab-">AB-</option>
          </select>
    </div>
  </form>
</div>

controller.py

@http.route(['/my/health-record-save'], type='json', auth="public", website=True)
    def portal_save_health_record(self, **kw):
        health_record_id = kw.get('h_record')
        blood_group = kw.get('blood_group')
        health_record = request.env['health.record'].search([('id', '=', health_record_id)])
        health_record.write({
            'blood_group': blood_group,
        })
        return request.redirect('/my/health-record')

What my concern is i dont know how to give the input class to <select> <option> dropdown list and make it to save to the backend through controller when the user click the button named save

Answer

It’s based on how you are render the view through- JS or controller.

Any way you should get hr.blood_group as a dictionary like – {‘o+’:”O+”,..}

then you can replace the option as below code.

<t t-set="blood_group" t-value="hr.blood_group"/>
<option t-foreach="blood_group" t-as="bgroup" t-att-value="bgroup">
   <t t-esc="blood_group[bgroup]"/>
</option>

This is the base reference I can give, if you have any queries comment below.

Also, I’m adding a reference link from the website, take a look at it.

https://github.com/odoo/odoo/blob/7ddf36474596ec5213aba7b892c1a62998c99da9/addons/website/static/src/xml/website.contentMenu.xml#L28