How can I change values of a select using JQuery?

Question

How can I change values of a select using JQuery?

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

What I want is that when I press the buttons that are yellow, the select will change depending on the button that you press, for example if I click the antiparasitic button, the select should change to antiparasitic and so on.

I add my jquery code (which right now I only show it in an alert)

function showType(producto) {
				var productType = producto.getAttribute("data-product-type");
				alert(productType + ".");
		}

<form action="" method="POST" name="search_form" id="search_form" class="form-group form-horizontal">
<select name="users" onchange="" class="select-form center">
<option value="">Todos los Producto:</option>
<option value="antiparasitarios">Antiparasitarios</option>
<option value="antiparasitarios">Antibacterianos</option>
</select></form>
<div class="flex-item">
<button class="btn btn-product" type="button" name="button" onclick="showType(this)" data-product-type="antiparasitarios">Antiparasitarios</button>
</div>
<button class="btn btn-product" type="button" name="button" onclick="showType(this)" data-product-type="antiparasitarios">Antibacterianos</button>
</div>

jquery dataset

asked by Francisco Figueroa 11.01.2018 в 18:50

source

2 answers

Problem when grouping data in query Procedure stored in mysql

score 1 · Answer 1

It would be like this using JQuery:

            <!DOCTYPE html>
            <html>
            <head>
                <title></title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        /*Delegamos un evento sobre los botones que tenga la clase btn-produc*/
                        $('.btn-product').on('click',function(){
                            /*Obtine el valor del atributo de este botón*/
                            var valor=$(this).attr("data-product-type");
                            /*Se le pasa el valor al select con el id select-formulario*/
                            $('#select-formulario').val(valor);
                        });
                    });

                </script>

            </head>
            <body>
                <form action="" method="POST" name="search_form" id="search_form" class="form-group form-horizontal">
                    <select name="users"  id="select-formulario" class="select-form center">
                        <option value="">Todos los Producto:</option>
                        <option value="antiparasitarios">Antiparasitarios</option>
                        <option value="antiparasitarios">Antibacterianos</option>
                    </select>
                </form>
                <div class="flex-item">
                    <button class="btn btn-product" type="button" name="button" data-product-type="antiparasitarios">Antiparasitarios</button>
                </div>
                    <button class="btn btn-product" type="button" name="button" data-product-type="antiparasitarios">Antibacterianos</button>
                </div>
            </body>
            </html>

score -1 · Answer 2

Here you have a function with jquery. What it does is take the "data-product-type" attribute that you have assigned to each button and show it in the select

		function show(q){
      //Coger el valor del atributo
			var valor = $(q).attr("data-product-type");
      //Mostrar el valor del atributo en el select correspondiente 
			$("#type").text(valor);

		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
		<option id="type"></option>
	</select>

	<button onclick="show(this);" value="Antiparasitarios" data-product-type="Antiparasitarios" >Antiparasitarios</button>
	<button onclick="show(this);" value="Antiparasitarios" data-product-type="Otro" >Otro</button>