Search code examples
htmlruby-on-railsrubyrails-admin

How do I get the (html) id from the select tag on rails_admin?


The 'rails_admin' generate this HTML below, I need to change the options of another 'select' tag depending on which 'option' is selected in this 'select' tag, with a coffescript/jquery. The id= of this 'select' tag is "schedule_tasks_attributes_1532831082497_service_id". How do I get this id with this number inside? This is not a fixed number.

<div class="form-group control-group belongs_to_association_type service_field "id="schedule_tasks_attributes_1532831082497_service_id_field">
  <label class="col-sm-2 control-label" for="schedule_tasks_attributes_1532831082497_service_id">Service</label>
  <div class="col-sm-10 controls">
    <select data-filteringselect="true" data-options="{&quot;xhr&quot;:false,&quot;remote_source&quot;:&quot;/admin/service?associated_collection=service\u0026compact=true\u0026current_action=create\u0026source_abstract_model=task&quot;}" placeholder="Buscar" name="schedule[tasks_attributes][1532831082497][service_id]" id="schedule_tasks_attributes_1532831082497_service_id" style="display: none;">
      <option value=""></option>
      <option value="5">Service 5</option>
      <option value="4">Service 4</option>
      <option value="3">Service 3</option>
      <option value="2">Service 2</option>
      <option value="1">Service 1</option>
    </select>
    <div class="input-group filtering-select col-sm-2" data-input-for="schedule_tasks_attributes_1532831082497_service_id" style="float: left;">
      <input type="text" class="form-control ra-filtering-select-input ui-autocomplete-input" style="display: inline-block;" placeholder="Buscar" required="required" autocomplete="off">
        <span class="input-group-btn">
          <label class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Show All Items" role="button">
            <span class="caret"></span>
            <span class="ui-button-text">&nbsp;</span>
          </label>
        </span>
      </div>
      <a data-link="/admin/service/new?modal=true" class="btn btn-info create" style="margin-left:10px" href="#">
        <i class="icon-plus icon-white"></i>
        Add new service
      </a>
      <a data-link="/admin/service/__ID__/edit?modal=true" class="btn btn-info update disabled" style="margin-left:10px" href="#">
        <i class="icon-pencil icon-white"></i>
        Edit service
      </a>
      <span class="help-block">Required. </span>
    </div>
  </div>

Solution

  • You can use the following codes in jquery to select the mentioned select tag.

    1. $("[id ^='schedule_tasks_attributes_']")
    2. $("[id $='_service_id']")

    In your case for perfect selection, you can use this:-

    $("select[id ^='schedule_tasks_attributes_'][id $='_service_id']")