Solved

Value from dynamically poulate Dropdownlist

Posted on 2014-02-26
10
249 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 42

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 42

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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

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 42

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 42

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Safari SVG Image Problem 1 21
Dynamic Google Map in Bootstrap Modal 7 21
Jquery autocomplete 10 31
Open a word document 23 19
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)

747 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

12 Experts available now in Live!

Get 1:1 Help Now