¿Como obtener el value y el id de un select multiple con JS o jQuery?

publicado por: Anonymous

Explico tengo un select multiple, en el cual se despliegan options con diferentes valores, entre los atributos que necesito rescatar son los id y los value, de los campos seleccionados, que son distintos, había probado con:

var segr_value = $("#segr_name").val();

El cual funciona, pero solamente me trae los atributos del value

Para obtener ahora el id había probado:

var segr_id = $("#segr_name").children(":selected").attr("id");

Pero solamente me devuelve un valor, en caso de seleccionar muchos valores.

Agradezco de ante mano, su ayuda por favor

   <div class="form-group">
                                <label for="segr_name" class="col-sm-4 control-label">Grupo de Servicio(*)</label>
                                <div class="col-sm-4">

                                    <select id="segr_name" name="segr_name" data-size="2" data-width="100%"
                                        class="selectpicker" multiple data-value="{{segr_name}}"
                                        title="Seleccione Grupo de Servicio">
                                    </select>
                                </div>
                            </div>

solución

Podrías resolverlo utilizando .each() sobre el resultado de $("#segr_name").children(":selected")

Ejemplo

_x000D_

_x000D_

let $select = $('#segr_name');
$select.on('change', () => {
  let selecteds = [];

  // Buscamos los option seleccionados
  $select.children(':selected').each((idx, el) => {
    // Obtenemos los atributos que necesitamos
    selecteds.push({
      id: el.id,
      value: el.value
    });
  });
  
  //
  console.log(selecteds);
});

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="segr_name" class="col-sm-4 control-label">Grupo de Servicio(*)</label>
  <div class="col-sm-4">
    <select id="segr_name" name="segr_name" data-size="2" data-width="100%" class="selectpicker" multiple data-value="{{segr_name}}" title="Seleccione Grupo de Servicio">
      <option id="opt1" value="1">1</option>
      <option id="opt2" value="2">2</option>
      <option id="opt3" value="3">3</option>
      <option id="opt4" value="4">4</option>      
    </select>
  </div>
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *