Reuse function on same page with Jquery (beginner) Change event?

Question

Reuse function on same page with Jquery (beginner) Change event?

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

1

What is the possibility of reusing $ .change?

People have a problem. I need on the same page to use

Multiple changes in multiple selects. It works like this: First change: User chooses to select 1

The change runs and a get json search via Json in the URL and shows the result.

Second change: User chooses in select 2 (which is different from select 1) The change runs and m get json search via Json in the second URL and shows the result.

The problem is:

When I squeeze each change into separate pages, Perfect Wheel.

But when I scroll on the same page it does not work. What do I need to do so that all changes (I will have more than 2) will run on the same page.

Use of this form I have taken from the Jquery documentation

$( "select" ).change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $(this).val() + " ";
    });
    console.log(str);
   
    var url = "http://minhaurl.com/json?cidade="+str;
$.getJSON( url, function( data ) {
Json rodando perfeito.
 });


  
})
  .change();

I just repeat the function by changing the URL, STR, and select parameters.

There are other ways to achieve the same change effect. And what can I repeat on the same page?

NOTE: Each select has its ID . Each selector that receives the values has its ID .

Thanks, hugs

OBS 2: I do not intend to join them, They are separate.

Each has its URL, and has its answers.

To help [ link

I'm quite a beginner. So I do not know much.

javascript jquery

asked by anonymous 06.04.2016 / 16:40

3 answers

How to measure the amount of disk space required for an ALTER TABLE operation? Adding Fields to the Body of a PHP Email

score 2 · Answer 1

I'd advise assigning a id to each select ... So you can easily identify them.

//Select 1...
<select id="selectTimes">
    <option>Flamengo</option>
    <option>Vasco</option>
    <option>Palmeiras</option>
</select>

//Select 2...
<select id="selectEstado">
    <option>RJ</option>
    <option>SP</option>
    <option>MG</option>
</select>

Then just assign a .change() to each element:

$( "#selectTimes" ).change(function () {
    //botei seu exemplo só para contextualizar..
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $(this).val() + " ";
    });
    console.log(str);

    var url = "http://minhaurl.com/json?cidade="+str;
    $.getJSON( url, function( data ) {
        //Json rodando perfeito.
    });
});

$( "#selectEstado" ).change(function () {
    //TODO
});

score 0 · Answer 2

You can improve your code completely, but it would be necessary to analyze the purpose of the final file.

The fastest response in this case would be to specify a class for each select in its HTML , and then in its JS , assign what each class should request to its server.

The way you are doing is very generalized. You are telling JS to make the JSON request on all elements select of the page. Therefore, they will all have the same behavior.

score 0 · Answer 3

0

Answer given by a person on facebook.

Dyemerson Almeida

> no pastebin

I found this answer too replaces str2 = $ (this) .val (); By

str2 = $ ("# iddoselect") val ();

06.04.2016 / 18:38