CODEWITHSUNDEEP
javascriptjquery
Dauezevy
Dauezevy

Reputation: 1080

Multiple select change event handle

html:

<tr><td>
    <select id="fruits" name = "fruits[]">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="mango">Mango</option>
        <option value="grape">Grape</option>
        <option value="watermelon">watermelon</option>
    </select>
</td>
<td>
<input type="text" name="color[]" />
</td>
<tr>
<td>
    <select id="fruits" name = "fruits[]">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="mango">Mango</option>
        <option value="grape">Grape</option>
        <option value="watermelon">watermelon</option>
    </select>
</td>
<td>
<input type="text" name="color[]" />
</td></tr>

js :

$(function() {
    $('#fruits').change(function(e) {
        alert("a");
        var selected = $(e.target).val();
        console.dir(selected);
    }); 
});

The user can add unlimited select option panel.

I want to handle which select option change.

For example if second select option is changed, i want to change second select option' s input color. How can i handle them ?

Upvotes: 0

Views: 100

Answers (3)

Adam
Adam

Reputation: 1

Add a class attribute to both selects.

Then you can use that in your jQuery selector. As IDs should be unique.

I.e. if I gave the select an attribute class="fruit" I could then use the following selector.

$(".fruit").change(function() {});

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

1) Id must be unique. Change that to class

<select class="fruits" name = "fruits[]">

and now you can use this to detect the current object

$(function() {
    $('.fruits').change(function(e) {
        alert("a");
        var selected = $(e.target).val();
        console.dir(selected);
        $(this).css("background-color", "colorName"); // or any css property
    }); 
});

Upvotes: 1

rrk
rrk

Reputation: 15846

Use class instead of ID if you have multiple elements.

$(function() {
  $('.fruits').change(function(e) {
    var selected = $(this).val();
    alert(selected);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
  <td>
    <select class="fruits" name="fruits[]">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="mango">Mango</option>
      <option value="grape">Grape</option>
      <option value="watermelon">watermelon</option>
    </select>
  </td>
  <td>
    <input type="text" name="color[]" />
  </td>
  <tr>
    <td>
      <select class="fruits" name="fruits[]">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="mango">Mango</option>
        <option value="grape">Grape</option>
        <option value="watermelon">watermelon</option>
      </select>
    </td>
    <td>
      <input type="text" name="color[]" />
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions