Question

I have a table which contains user choices of a certain type… with each choice they can then categorise them in order of preference e.g. choice 1, choice 2, choice 3 etc. their first, second, third choices of all time

So, I have a list of all their choices which might be for example:

film name 1 :: choice 1

film name 2 :: choice 1

film name 3 :: choice 2

film name 4 :: choice 3

film name 5 :: choice 3

etc etc

What I want them to be able to do is click on their choice preference, e.g. their preference for film name 2, and it then change to a dropdown box to allow them to change it from choice 1 to choice 2, then when click choice 2 on the dropdown it updates the table and goes back to simple data listing. Obviously I want this functionality for every row displayed.

Is this possible? If so how? Are there any code/functions/classes written already for such functionality?

I use PHP with MySQL db

Answer 1

Yes this can be done, assuming you don’t care if it makes it difficult for users who can’t or don’t use a mouse. It’s not difficult with jQuery, though it shouldn’t be too much harder without. One approach would be to start with a hidden drop-down in all the appropriate places and then just show and hide them based on user actions. The other approach would be to append a drop-down when needed and remove it when finished.

Following is a dodgy (but working: http://jsbin.com/ocogop/2/edit#javascript,html,live) implementation that I whipped up just as a proof of concept.

<script>
$(document).ready(function(){
  var choices = "<select class='choices'>"
                   +"<option value='Choice 1'>Choice 1</option>"
                   +"<option value='Choice 2'>Choice 2</option>"
                   +"<option value='Choice 3'>Choice 3</option>"
                   +"<option value='Choice 4'>Choice 4</option>"
                   +"</select>";

  $(".update").click(function() {
     var $this = $(this),
         currentChoice;
     // don't continue if there's already a select in this cell
     if ($this.find("select").length != 0)
        return;
     currentChoice = $this.html();
     var $choices = $(choices);
     $this.empty().append($choices);
     $choices.val(currentChoice);
  });

  $(document).on("change", ".choices", function() {
     var $this = $(this);
     $this.parent().html($this.val());
     return false;
  });
});
</script>

<table id="list">
   <tr>
      <td>Film Name 1</td>
      <td class="update">Choice 1</td>
   </tr>
   <tr>
      <td>File Name 2</td>
      <td class="update">Choice 3</td>
   </tr>
   <!-- etc -->
</table>

This should get you started, though there are many ways it could be improved (I may well get comments telling me all the things I did “wrong”, but really I don’t have time right now to tidy it up). Note that the above uses .on() but for versions of jQuery older than 1.7 you should use .delegate().