0

Estimados

Estoy intentando capturar un dato de una tabla html y enviarlo a un combo box, pero no me funciona, solo me funciona si lo envío a un campo input. he probado enviando el valor a la etiqueta del combo pero no muestra nada. aca les dejo un ejemplo que hice para poder explicar mi problema.

acá imagen de como funciona con input text.

introducir la descripción de la imagen aquí

acá dejo el código.

<!DocType:html>

<html>

<head>

<title></title>

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!--<script type="text/javascript" src="/fechaHora.js"></script>-->

</head>

<body>

<h1>Formulario 1 capturar celda de tabla y mostrar en input text</h1>

<table border=1 cellpadding=0 id="tablatest">
<thead>

<tr>

<th>ID</th>

<th>NOMBRE</th>

</tr>

</thead>

<tbody>

<tr>

<td>7889</td>

<td>HOLA</td>

</tr>

<tr>

<td>7676</td>

<td>HOLA2</td>

</tr>

</tbody>

</table>

<br>

<form>

<div><b>Combo:</b></div>

<div class="col-sm-2"><select id="combo" class="form-control">

<option ></option>

</select>

</div>

</form>

<script>

$(document).ready(function () {

$("#tablatest tbody tr ").on ("click",function (event) {

var id2= $(this).find("td:nth-child(2)").html();

$("#combo").val(id2);

});

});

</script>

</body>

</html>

Acá imagen del problema introducir la descripción de la imagen aquí

También probé pasando el valor por el id directo a la etiqueta pero tampoco me funciona. Como se podría pasar el valor al combo box?

1
  • Para poder poner el valor que quieres tiene que existir una option con el value que quieres poner.
    – alanfcm
    el 10 jun. 2019 a las 20:25

1 respuesta 1

1

Lo que puedes hacer es agregar una nueva opción con append, te muestro el siguiente ejemplo:

$("#tablatest tbody tr ").on("click",function (event) {

var id2= $(this).find("td:nth-child(2)").html();

//Colocar false en vez de true si no deseas que se muestre como opción seleccionada en el combo
$("#combo").append(new Option(id2, "value", false, true));

//Remover esta línea si deseas que se repitan las opciones
$(this).off('click');     

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<h1>Formulario 1 capturar celda de tabla y mostrar en input text</h1>

<table border=1 cellpadding=0 id="tablatest">
<thead>

<tr>

<th>ID</th>

<th>NOMBRE</th>

</tr>

</thead>

<tbody>

<tr>

<td>7889</td>

<td>HOLA</td>

</tr>

<tr>

<td>7676</td>

<td>HOLA2</td>

</tr>

</tbody>

</table>

<br>

<form>

<div><b>Combo:</b></div>

<div class="col-sm-2"><select id="combo" class="form-control">

</select>

</div>

</form>

</body>

</html>

Lo que realicé para que no se repitieran las opciones fue remover el evento, de tal modo que ya no se agregará la opción al combo al hacer click.

Te comparto la documentación del append por si lo necesitas: Append

También te comparto la documentación donde se especifica el funcionamiento del new Option: Option

Espero te ayude. Saludos.

3
  • Si sirve, el único problema es que a medida que se hace click, los valores se van duplicando en el combo y estos no se ven selecionados, sino que hay que ver el combo y ahi seleccionarlos el 10 jun. 2019 a las 20:40
  • @SimónPereiraVigouroux listo compañero, por un momento no me di cuenta que eras el OP, ya modifiqué la respuesta a como solicitaste en los comentarios, ten en cuenta que esos detalles debes especificarlos en la pregunta. Saludos. el 10 jun. 2019 a las 21:23
  • Mil gracias me sirvió el 10 jun. 2019 a las 21:33

Tu Respuesta

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

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