Pre Select an option in the select box in a modal

Question

I have an accordion here is the code:

<div class="accordion">
            <div class="accordion-title accordion-area">
              <a href="#joinus/jr-software-engineer/" id="accordion-link">Junior Software Engineer</a>
            </div>
            <div class="accordion-container">This is the Body <a href="#apply" class="btn btn-hire"> Apply Now</a></div>
            <div class="accordion-title accordion-area">
              <a href="#joinus/sr-software-engineer/" id="accordion-link">Senior Software Engineer</a>
            </div>
            <div class="accordion-container">This is the Body <a href="#apply" class="btn btn-hire"> Apply Now</a></div>
            <div class="accordion-title accordion-area">
              <a href="#joinus/software-engineer-intern/" id="accordion-link">Intern Software Engineer</a>
            </div>
            <div class="accordion-container">This is the Body <a href="#apply" class="btn btn-hire"> Apply Now</a></div>
</div>

After clicking every individual Apply Button this modal opens:

<div id="apply" class="modal-holder">
  <a class="base-close" href="#joinus"></a>
  <div class="modal">
    <a class="close-modal" href="#joinus"><i class="fa fa-times"></i></a>
    <div class="modal-header">
      Apply
    </div>
    <div class="modal-body">
      <%= form_for @job_application do |f| %>
        <div class="row" role="list">
          <div class="col-6">
            <div class="form-holder">
              <%= label_tag(:role, 'Job Position *') %>
              <%= f.select :role, options_for_select(['Junior Software Engineer','Senior Software Engineer', 'Intern Software Engineer']), class: 'text-box' %>
            </div>
          </div>  
        </div>
        <%= submit_tag 'Send', class: 'btn btn-primary btn-large' %>
      <% end %>
    </div>
  </div>
</div>

What happens now is that the list of jobs in the select box comes as it is in the code, but I want that whenever a modal opens from the job link from which the modal was clicked, the job title will be pre selected in the Select box like it will come up at the first of the list and be selected by default. I want to achieve it using jQuery and Simple form for Ruby on Rails.

Answer 1

You can add class and data-select for a tags, then use javascript to pre select

<a href="#apply" class="btn btn-hire class-of-a-tag" data-select="Junior Software Engineer"> Apply Now</a></div>

Try

$('.class-of-a-tag').click(function() {
  $('#id-of-select-box').val($(this).data('select'))
})