Utilizing Javascript to change multiple dynamicially named drop downs to one value

Go To StackoverFlow.com

1

I was trying to adapt this example to do what I'm needing. I have a table of information where I'm wanting to implement the option of having an entire column set to the same value on a button click. Is this possible to do? I'd love a point in the right direction.

Just for the sake of giving an example. Say I have a 4 day gaming party I'm planning where the page looks like this. The drop down holds 3 options on attendance (Yes, No, Maybe). Every drop down is named dynamically depending on the day and person. So it would look sort of like my crude excel mockup. Ideally I'd like a button in the same area as the day marker that would mark everyone in a given day to "Yes" from the dropdown.

Image from the description

2012-04-03 21:08
by Jennifer L
... and your question is... - Marc B 2012-04-03 21:10
I have an alright grasp of how this would work with one drop downs but not multiple ones. I haven't been able to find any samples of if it's even possible so I don't know if I'm headed in the right direction - Jennifer L 2012-04-03 21:27


0

Yes, it's totaly posible. If you have access to the html, you could do something like this:

  • Add a class for every cell, referencing the day, so all cells (td elements) on the "Day 1" column would have a class called "day1" , all cells on the "Day 2" column would have a class called "day2" and so on.
  • Add the buttons you mention on the Day column headers, and give them an ID with the same criteria you used for the cells, so the button for column "Day 1" would have an ID of "day1" and so on. Then you do something like the following.
<script type="text/javascript">
$(document).ready(function() {
      $(".your-button-class").click(function() {
         var day_reference = $(this).attr("id");
         $("." + day_reference + " select").val(day_reference);
         return false;
        });
});
</script>

I'm assuming 2 things:

  • You're using jQuery
  • The value of the dropdown options are the same as the Id you're using for your buttons.

If you're not using jQuery or a similar js library, then let us know what you're working on and we can help you.

2012-04-03 21:38
by Deleteman
I do have access to the HTML, I've fixed my code so every cell has the day. I thought I would need to do something in the onClick in the button definition. Would the code just go inside a script tag - Jennifer L 2012-04-03 21:59
I've edited my code so you can see how to add it to your page. Remember you need to have jquery - Deleteman 2012-04-04 12:58
I do. I'm assuming that I need to change 'your-button-class', the id is being set in the code, how do I pull that in? Do I need to put that within a function to call for the onClick?

No, first you set the same class for all buttons, and put that instead of "your-button-class". Second: You don't need the "onClick" action, that's what the click method is for - Deleteman 2012-04-04 14:30
Thank you for all your help! :) I should have everything set correctly. It's just refreshing like I've hit the other button to submit without changing the drop downs but I'm assuming it's one of my if statements - Jennifer L 2012-04-04 16:01
Not sure I understand, but if it's refreshing your page when you click the button, I've added a minor update to the code return false;should stop your button's default action, and thus, work as you expect.. - Deleteman 2012-04-04 16:03
I've been able to edit it and save if I change one drop down at a time and it looks like it's going through as if I hit the other button, my if statements are in php. I added that in but it's still doing the same refresh. Could this code be used if I did a dropdown with no page refresh - Jennifer L 2012-04-04 16:26
I'm lost now. I think you should either open another issue or post your entire code - Deleteman 2012-04-04 16:54


0

Well. I'd recommend to use JQuery to do these kind of things - like setting a lot of dropdowns to a given value.

<script type='javascript'>
  $(document).ready(function() {
       $('select#setall').change(function() {
           $('.attendance').val($(this).val());
       });
  });
</script>

<select id="setall">
     <option>Yes</option>
     <option>No</option>
     <option>Maybe</option>
</select>


Day 1:
<select class="attendace">
     <option>Yes</option>
     <option>No</option>
     <option>Maybe</option>
</select>

Day 2:
<select class="attendace">
     <option>Yes</option>
     <option>No</option>
     <option>Maybe</option>
</select>

Day 3:
<select class="attendace">
     <option>Yes</option>
     <option>No</option>
     <option>Maybe</option>
</select>
2012-04-03 21:39
by Khôi
if the class is dynamically named like "day1" "day2" what would I change the .attendance to in this line? $('.attendance').val($(this).val()) - Jennifer L 2012-04-04 05:05