Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Ajax JQuery Dropdown option adding issue

Posted on 2013-01-03
4
Medium Priority
?
637 Views
Last Modified: 2013-01-08
Hi,

I want to set the options for dropdown list in a form using ajax and jquery.

My code looks like this:


$('select#project').live('change',function(event) {
                          var $country=$(this).val();
                          $.get('select.do',{countryname:$country},function(responseJson) {  
                              var $select = $('#department').get($(this).index());  
                              var $option = $('#department option');
                              $option.remove();
                              $.each(responseJson, function(key, value) {              
                                    $('<option>').val(key).text(value).appendTo($select);      
                              });
                        });
                    });

This works fine and retrieves the value from action servlet and sets the value to the option list.

But, it always sets the value to the first row's dropdown NOT to the current row.

I am adding multiple rows using jquery dynamically.

Code for adding is below:

$(document).ready(function() {
                        var $button = $('#add-row');
                              $row = $('.timesheet-row').clone(false);

                        $button.click(function() {
                              $row.clone(false).insertBefore( $button );
                        });
});

Below is my html form code:
<div class="timesheet-row">

                        <label>Project:
                              <select name="project[]" id="project" required>
                                    <option value="1">Project-1</option>
                                    <option value="2">Project-2</option>
                                    <option value="3">Project-3</option>
                                    <option value="4">Project-4</option>
                                    <option value="5">Project-5</option>
                              </select>
                        </label>

                        <label>Department:
                              <select name="department[]" id="department" required>
                              <option value="" />
                              </select>
                        </label>

                        <label>Task:
                              <select name="task[]" required>
                              <option value="" />
                              </select>
                        </label>

                        <label>Hours:
                              <input type="number" step="0.25" name="hours[]" width="1" placeholder="2.0" required />
                        </label>

                        <label>Comment:
                              <input type="text" name="comment[]" width="50" />
                        </label>

                  </div>

                  <input type="button" id="add-row" name="add-row" value="Add row" />

Please refer the image attached.

Can anyone help to set the dropdown option to current row instead to the first row always.

Thanks
dropdown.png
0
Comment
Question by:arjunarajan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 11

Assisted Solution

by:Chris Sandrini
Chris Sandrini earned 1000 total points
ID: 38742814
Hi

I can't really test it as I am missing some of the functions. But one thing I see is that you are using id="" and you are using the same id everytime you create a new row. ID has to be unique

You could use class="department" instead and then select it with

var $select = $('.department').get($(this).index()); 

Open in new window

0
 

Author Comment

by:arjunarajan
ID: 38742938
you mean, it is not required to have a unique name for class when we create multiple rows?

I am not much familiar with JQuery. Can you pls give me the sample code snippet ?
0
 

Author Comment

by:arjunarajan
ID: 38742964
You said 'I can't really test it as I am missing some of the functions'

Probably, you will be missing the action servlet to send the option list which i call in the onChange event :

 $.get('select.do',{countryname:$country},function(responseJson)

You can just write a simple action to resturn a JSON map and test
0
 
LVL 11

Accepted Solution

by:
Chris Sandrini earned 1000 total points
ID: 38742971

you mean, it is not required to have a unique name for class when we create multiple rows?

I am not much familiar with JQuery. Can you pls give me the sample code snippet ?

id is a unique name that can only exist once. When you create multiple copies you will have multiple times the same id.

Read here
http://www.w3schools.com/css/css_id_class.asp

If you need to specify multiple times the same name use class instead.

Change

 <select name="department[]" id="department" required>

to 

 <select name="department[]" class="department" required>

Open in new window


and change

var $select = $('#department').get($(this).index());  
                              var $option = $('#department option');

to

var $select = $('.department').get($(this).index());  
                              var $option = $('.department option');

Open in new window


Do the same for id="project"
0

Featured Post

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question