asked on

Value from dynamically poulate Dropdownlist

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]

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

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

Niall Gallagher

ASKER

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);

Chris Stanyon

If you want to set the selected value of the second dropdown, just use the code you already have:

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

Niall Gallagher

ASKER

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

Niall Gallagher

ASKER

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

Niall Gallagher

ASKER

Thanks that worked great.

Chris Stanyon

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

Chris Stanyon

Ahhh. Looks like we cross-posted :)

Niall Gallagher

ASKER

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

Thanks again