Solved

Value from dynamically poulate Dropdownlist

Posted on 2014-02-26
10
250 Views
Last Modified: 2014-02-27
I have 2 DropDown lists on a page showing departments and positions.  When a user changes a department in the dropdown the other should populate with the positions available in that Dept.
I found a bit of code and altered it to do my job
        $("#ddlDept").change(function() {
             if ($("#ddlDept").val() != "-1") {
                 var deptid = $(this).val();
                 var posid = $("#ddlPosition").val();
                 $.getJSON("/Details/GetPositionByDept", { selectedDeptID: deptid },
                        function(dropdowndata) {
                            var select = $("#ddlPosition");
                            select.empty();
                            select.append($('<option/>', { value: 0, text: "Select Position" }));
                            $.each(dropdowndata, function(index, itemData) {
                                select.append($('<option/>', {
                                    value: itemData.valueOf,
                                    text: itemData.Text
                                }));

Open in new window

and it populates great but what I want is it will select the position which has the same value as posid.

I have tried $("#ddlPosition").val(posid); but it does nothing>
also wrote a function for catching the value of the ddlPosition onChange
  $("#ddlPosition").change(function() {
         alert($("#ddlPosition").val());
     });

Open in new window

but it returns [object HTMLOptionElement]
0
Comment
Question by:Niall292
  • 5
  • 4
10 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39889688
You need to get the value of the selected option, not the value of the dropdown itself:

var posid = $(":selected", "#ddlPosition").val();
...
$("#ddlPosition").val(posid);

Open in new window

This will only work if the selected option is still available after your JSON request
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39889707
Can you provide some sample data and the rest of your code.

In the meantime, I have had good success using http://www.appelsiini.net/projects/chained for multiple selects.

The way it works is you send all of your data to the browser at once and set the class of the 2nd option group to match the value of the first.  When you select the first group, the 2nd only shows classes that match the first.
<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

Open in new window

0
 

Author Comment

by:Niall292
ID: 39889970
Chris,
that works great for that part and Thank you
The reason I was trying to check if that works is because I want to set the selected value

Would this work then
$(":selected", "#ddlPosition").val(posid);
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39890011
If you want to set the selected value of the second dropdown, just use the code you already have:

$("#ddlPosition").val(posid);
0
 

Author Comment

by:Niall292
ID: 39890050
Chris,
I tried that and it did nothing. I tried it in a few places this is the last one

 <script type="text/javascript">
     $(document).ready(function() {
         $("#ddlDept").change(function() {
             if ($("#ddlDept").val() != "-1") {
                 var deptid = $(this).val();
                 var posid = $(":selected", "#ddlPosition").val();
                 $.getJSON("/Details/GetPositionByDept", { selectedDeptID: deptid },
                        function(dropdowndata) {
                            var select = $("#ddlPosition");
                            select.empty();
                            select.append($('<option/>', { value: 0, text: "Select Position" }));
                            $.each(dropdowndata, function(index, itemData) {
                                select.append($('<option/>', {
                                    value: itemData.valueOf,
                                    text: itemData.Text
                                }));
                            });
                        });
                        
             };
         });
     });
     $("#ddlPosition").val(posid);
 </script>

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:Niall292
ID: 39890401
Chris,
Your answer was right although I haven't got it going 100% yet but I noticed the biggest part of my problems were coming from
value: itemData.valueOf,
   text: itemData.Text

When I checked my code the itemData.valueOf should have been itemData.Value
0
 

Author Closing Comment

by:Niall292
ID: 39890405
Thanks that worked great.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39890407
OK. It needs to go after the $.each() block, but like I said - it will only work if the value still exists in the #ddlPosition dropdown after you've rebuilt it

 <script type="text/javascript">
     $(document).ready(function() {
         $("#ddlDept").change(function() {
             if ($("#ddlDept").val() != "-1") {
                 var deptid = $(this).val();
                 var posid = $(":selected", "#ddlPosition").val();
                 $.getJSON("/Details/GetPositionByDept", { selectedDeptID: deptid },
                        function(dropdowndata) {
                            var select = $("#ddlPosition");
                            select.empty();
                            select.append($('<option/>', { value: 0, text: "Select Position" }));
                            $.each(dropdowndata, function(index, itemData) {
                                select.append($('<option/>', {
                                    value: itemData.valueOf,
                                    text: itemData.Text
                                }));
                            });

                            $("#ddlPosition").val(posid);

                        });
             };
         });
     });
 </script>

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39890410
Ahhh. Looks like we cross-posted :)
0
 

Author Comment

by:Niall292
ID: 39891499
By the way your last comment about moving the $("#ddlPosition").val(posid); worked great

Thanks again
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SSL https .net web site force redirect 3 31
Split in Javascript 5 30
Visual Studio 2015 Source Code Control 10 26
highcharts wont fix inside a bootstrap modal window 6 26
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

930 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now