Beginner struggles with jQuery.change tag

Question

Knowing HTML well, I'm trying to learn jQuery. I found the .change function on a jQuery site that does exactly what I want.

Ideally, I would like test1 and test2 to influence each other, and test3 and test4 only to each other, etc.

Currently test2 and test4 affect both test1 and test3

Here is my code:

<select id="test1" name="sweets" multiple="multiple"> <option>Chocolate</option> <option selected="selected">Candy</option> <option>Taffy</option> <option selected="selected">Caramel</option> <option>Fudge</option> <option>Cookie</option> </select> <div id="test2"></div> <script> $("select#test1").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div#test2").text(str); }) .change(); </script> <select id="test3" name="sweets" multiple="multiple"> <option>Chocolate</option> <option selected="selected">Candy</option> <option>Taffy</option> <option selected="selected">Caramel</option> <option>Fudge</option> <option>Cookie</option> </select> <div id="test4"></div> <script> $("select#test3").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div#test4").text(str); }) .change(); </script> 

I tried to separate it by identifiers, but it is not quite there yet. How can I make this work correctly?

Answer 1

This line:

  $("select option:selected").each(function () { 

It should be written like this:

 $("#test1 option:selected").each(function() { 

Using the common "select" in this line, you select each "select" element on the page, using your id instead, it will only target the desired select tag.

Answer 2

This is because you select all the selected options on your page. Instead of $("select option:selected").each(..) use $(this).find("select option:selected").each(..) . Thus, only the selected selection parameters that have been changed in test2-div will be displayed, and not the parameters of another selection.

Answer 3

 $("select#test1").change(function () { var str=$("#test1 :selected").text(); $("div#test2").text(str); }); 

js fiddle http://jsfiddle.net/xdJ3H/

Answer 4

It seems that you really want it, this is a common control that associates a select box with its div div tag. To do this, you need a little different:

http://jsfiddle.net/b9chris/KpUWP/

 (function() { function update() { var str = $.map($('option:selected', this), function(option) { return $(option).text(); }).join(' '); $(this).next().text(str); }; $("select").change(update) .each(update); })(); 

So, first you define the update function separately, instead of assigning it directly to the change () handler, and then throwing the change () event. Although this is a very good hack, it introduces strange problems if something else needs to be heard for the change event.

Then, to get the div that you want to assign to your line, since you know that this is always the next brother, you simply use .next() .

To create the string separator string that you built, instead of each loop, you can simply use the map function, which simply takes each item in the selected list (in this case, the selected option tags) and returns their text value. The result is a simple array of what you wanted .Jin's built-in .join () method to build your final string from.

You seem to have noticed that this object in the update function is a select tag; you can use this as a search context, for example, calling $('option:selected', this) to get only those parameters of this tag, instead of resorting to identifiers and trying to work out what the selected handler refers to.