• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

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]
0
Niall292
Asked:
Niall292
  • 5
  • 4
1 Solution
 
Chris StanyonCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
Niall292Author Commented:
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
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

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

$("#ddlPosition").val(posid);
0
 
Niall292Author Commented:
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
 
Niall292Author Commented:
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
 
Niall292Author Commented:
Thanks that worked great.
0
 
Chris StanyonCommented:
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
 
Chris StanyonCommented:
Ahhh. Looks like we cross-posted :)
0
 
Niall292Author Commented:
By the way your last comment about moving the $("#ddlPosition").val(posid); worked great

Thanks again
0

Featured Post

Veeam and MySQL: How to Perform Backup & Recovery

MySQL and the MariaDB variant are among the most used databases in Linux environments, and many critical applications support their data on them. Watch this recorded webinar to find out how Veeam Backup & Replication allows you to get consistent backups of MySQL databases.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now