Role reuse on the same page with Jquery (beginner) Change event?

Question

What is the possibility of reusing $.change ?

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

several changes in several selects. Here’s how it works: First change: User chooses in select 1

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 at the second URL and shows the result.

The problem is:

When I run each change on separate pages Perfect wheel.

But when I turn on the same page, it doesn’t work. What I need to do to make all changes (I will have more than 2) run on the same page.

That’s how I got 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 effect as change. And that I can repeat on the same page ?

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

Thank you, hugs

OBS 2: I don’t intend to join them, They are separate.

Each has its URL, and has its answers.

To help [http://pastebin.com/LVQa4HAU][1]

I’m quite a beginner. So I don’t know much.

Answer 1

I advise assigning a id for each select... so you can identify them smoothly.

//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>

After that just assign one .change() for 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
});

Answer 2

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

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

The way you’re doing it is very widespread. You’re telling JS to request JSON on all elements select page. Therefore, they will all have the same behavior.

Answer 3

Answer given by a person on facebook.

Dyemerson Almeida

> in the Pastebin

I found this answer tbm replaces str2= $(this). val(); For

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