0

Tengo 2 select con la misma clase y diferente id, cuando quiero que primero me salga el 2 select y presionando el 2 boton no es capaz de tomar el valor, pero si lo hago con el primer select y el primer boton si toma el valor. ¿CÓmo hago para que me tome el valor independiente de cual es primero?

aqui un demo de lo que llevo DEMO

2
  • Hola @Eduard sería un poco más útil añadir el demo aquí que enviar a una página externa
    – Jorius
    Commented el 24 mar. 2017 a las 13:35
  • Además de traer el código a la propia pregunta, estaría bien que clarificases un poco qué es lo que quieres. He leído varias veces la pregunta y aún no me queda claro qué es lo que estás intentando hacer.
    – Alvaro Montoro
    Commented el 24 mar. 2017 a las 15:45

2 respuestas 2

1

No es necesario que selecciones ambos desplegables para poder dibujar. Simplemente agrega otro data atributo por ejemplo ref el cual mantenga relación con rel del botón presionado y así saber qué select y canvas seleccionar.

Ejemplo

$(document).ready(function() {

  $('.draw').click(function() {
    var rel = $(this).attr('rel');
    var select = document.querySelector('select[ref="' + rel + '"]');

    draw(rel, $(select).val());
  });
});

function draw(rel, value) {
  var canvas = document.querySelector('canvas[ref="' + rel + '"]');
  var ctx = canvas.getContext("2d");

  if (value === '2') {
    // Draw the face
    ctx.fillStyle = "yellow";
    ctx.beginPath();
    ctx.arc(95, 85, 40, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.fillStyle = "black";

    // Draw the left eye
    ctx.beginPath();
    ctx.arc(75, 75, 5, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();

    // Draw the right eye
    ctx.beginPath();
    ctx.arc(114, 75, 5, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();

    // Draw the mouth
    ctx.beginPath();
    ctx.arc(95, 90, 26, Math.PI, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();

    // Write "Hello, World!"
    ctx.font = "30px Garamond";
    ctx.fillText("Hello, World!", 15, 175);

  }

  if (value == '4') {
    // Draw the face
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.arc(95, 85, 40, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.fillStyle = "black";

    // Draw the left eye
    ctx.beginPath();
    ctx.arc(75, 75, 5, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();

    // Draw the right eye
    ctx.beginPath();
    ctx.arc(114, 75, 5, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();

    // Draw the mouth
    ctx.beginPath();
    ctx.arc(95, 90, 26, Math.PI, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();

    // Write "Hello, World!"
    ctx.font = "30px Garamond";
    ctx.fillText("Hola, Mundo!", 15, 175);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="todo" ref="1">
  <option selected>Ingrese cant</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

<div>
  <button class="draw" rel="1">Draw</button>
</div>

<div>
  <canvas ref="1" width="200" height="200"></canvas>
</div>


<select class="todo" ref="2">
  <option selected>Ingrese cant</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>


<div>
  <button class="draw" rel="2">Draw</button>
</div>

<div>
  <canvas ref="2" width="200" height="200"></canvas>
</div>

4
  • Esta respuesta está correcta, y sin embargo el snippet no me dibuja el primer canvas. WTF
    – ffflabs
    Commented el 24 mar. 2017 a las 17:47
  • @amenadiel a mí me dibuja normal. El de arriba (siempre que selecciones 2) dibuja una cara amarilla y el de abajo (siempre que selecciones 4) dibuja una azul.
    – gugadev
    Commented el 24 mar. 2017 a las 17:49
  • Hmmm funciona con algunos números. Con otros se superpone a la imagen anterior. Pero es problema de la función draw, claramente, así que está fuera del alcance de la pregunta
    – ffflabs
    Commented el 24 mar. 2017 a las 17:51
  • Sí, lo que pasa es que le falta limpiar el lienzo antes de volver a dibujar.
    – gugadev
    Commented el 24 mar. 2017 a las 17:53
0

Lo que puedes hacer es usar :first (Toma el primer elemento que se consiga con la clase) o :last (Toma el ultimo elemento con la clase) como:

var test = $('.todo:first').val();

var testy2 = $('.todo:last').val();

Aca esta tu ejemplo actualizado

Nota: Aca es util porque solo tienes 2 si aumenta la cantidad de controles es mejor buscar otra alternativa, como crearles Ids unicos.

Edit:

Basado en tu comentario lo que peudes hacer es englobar cada select con los button en div separados asi:

<div>
  <select class="todo" id="ty">
    <option selected>Ingrese cant</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <div>
    <button class="draw" id="draw" rel="1" data-select='1'>Draw</button>
  </div>
  <div>
    <canvas  id="1" width="200" height="200"></canvas>
  </div>
</div>

Para luego via jQuery hacer esto:

var test = $(this).parent().parent().find('select').val();

Lo que hace es, vete al padre del padre (Este es el div que engloba cada seccion) busca el select, y dame su valor.

Codigo actualizado aca

4
  • Ese es el problema, que son mucho, es decir por medio de un input yo digo cuandos select me salen y hay es donde no me funciona
    – Eduard
    Commented el 24 mar. 2017 a las 13:29
  • @Eduard Ya te doy otra solucion que habia pasado por alto
    – Wilfredo
    Commented el 24 mar. 2017 a las 13:47
  • estoy pendiente
    – Eduard
    Commented el 24 mar. 2017 a las 14:15
  • @Eduard Mira si asi te funciona ahora.
    – Wilfredo
    Commented el 24 mar. 2017 a las 15:33

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.