2

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>
1
  • Deberias agregar tu HTML.
    – alanfcm
    Commented el 26 ago. 2019 a las 16:47

2 respuestas 2

3

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

Ejemplo

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);
});
<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>

1

Otra opcion es cambiar el selector a "#segr_name :selected" y usar .map() sobre esos valores, ejemplo:

$("#enviar").click(function() {

  const ids = [...$("#segr_name :selected")].map(e => e.id);

  console.log(ids)

});
<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="uno">1</option>
      <option id="dos">2</option>
      <option id="tres">3</option>
      <option id="cuatro">4</option>
    </select>
  </div>
</div>

<button id="enviar">Enviar</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.