Solved

Value from dynamically poulate Dropdownlist

Posted on 2014-02-26
10
254 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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
 

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)
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…

792 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