1

I'm looking for a way to add a custom option to a drop down select list with Jquery. So the user would click the drop down, and be presented with a list of options, the last being 'add other...' once they click this they can then enter an option of their own (through a pop up, popover, directly inline or however.)

There's the post below that explains it, however, I'm using CI which has the options as an array etc. How can I apply this in Code Igniter?

How do I add options to a DropDownList using jQuery?

Thanks!

p.s. My js knowledge isn't great.

Community
  • 1
  • 1
Robimp
  • 704
  • 6
  • 13
  • 29

1 Answers1

1

Try this on for size:

http://jsfiddle.net/Fh5Bz/1/

HTML:

<select id="myselect">
    <option>hello</option>
    <option>world</option>
    <option>Add other...</option>
</select>

<div id="addother">
    <input type="text" id="addother_input" />
</div>​

CSS:

#addother {
    display:none;
}​

JS:

$(document).ready(function() {
    $('#myselect').change(function(e) {
        if ($(this).val() == "Add other...") {
            $('#addother').show();

            //set the input back to an empty string
            $('#addother_input').val('');
        } else {
            $('#addother').hide();
        }
    });
});​

Edit: Sorry, missed your line about it being a CI-generated select element. In CI, you create a select element like this:

$options = array(
                  'small'  => 'Small Shirt',
                  'med'    => 'Medium Shirt',
                  'large'   => 'Large Shirt',
                  'xlarge' => 'Extra Large Shirt',
                );

echo form_dropdown('shirts', $options);

If you'd like to create an extra option, simply tack it on to the end like so:

$options = array(
                  'small'  => 'Small Shirt',
                  'med'    => 'Medium Shirt',
                  'large'   => 'Large Shirt',
                  'xlarge' => 'Extra Large Shirt',
                  'addother' => "Add other..."
                );

echo form_dropdown('shirts', $options, null, 'id="myselect"');

Then, in your jQuery, test for $(this).val() == "addother" instead of "Add other...".

treeface
  • 13,270
  • 4
  • 51
  • 57
  • Thanks treeface! I'll try that out, and nice pointer to jsFiddle, I've never seen that before - pretty sweet. – Robimp Sep 27 '10 at 17:08
  • Indeed, you're welcome, @Robimp. I've never used CI's form helper, so I can't speak perfectly to all of the specifics (e.g. you might not even need an associative array for the options array, thus allowing you to check against "Add other...", or you could simply make that array key be "Add other..." or "-1" or whatever). Also not entirely sure about the third parameter in the form_dropdown() function. I'm sure they allow you to put null in there if you don't want to have any option explicitly selected. – treeface Sep 27 '10 at 17:16
  • Yeah I'm having a little trouble getting it to work, not sure what I'm doing wrong, the browser seems to be removing the js I think. I'm dropping it directly into the document (view) as it's being pulled in via ajax. In fact, typing that, I've just realised you can't pull scripts in via ajax. Damn. The third parameter are used for 'set_value('input_name')' that then goes back for validation at the controller, then onto the array for the db - i think. I generally use this for my CI forms, which takes care of everything: http://formigniter.org/ . – Robimp Sep 27 '10 at 17:23
  • I think your solution works fine, just the way I'm trying to use it pulling the form in via ajax is breaking it. – Robimp Sep 27 '10 at 17:24
  • Sweet! Glad you got it working. I knew ignoring my SO message box for a half hour was a good idea X-D – treeface Sep 27 '10 at 18:09
  • Oh...just one more thing...could you explain what it was that wasn't working? I knew something in my answer would be slightly wrong, but I'd like to change it so that posterity looks kindly on this discussion :) – treeface Sep 27 '10 at 18:13
  • No it works great, I just had to get it in the right order in my code. – Robimp Sep 27 '10 at 19:17
  • The only things I changed were: – Robimp Sep 27 '10 at 19:17
  • Awesome...glad to be able to help! – treeface Sep 27 '10 at 19:18
  • and added the name and value attributes so the db insert would work, which is does like a charm! Mint! Sorry for the multiple comments, kept hitting return out of habit. – Robimp Sep 27 '10 at 19:19
  • oh yeah, and I had multiple instances of this, so for anyone else reading needing to do that, just copy the function and give everthng unique id's, including the 'addother'. Thanks for helping me out treeface, you've probably saved me a few hours off my working day! – Robimp Sep 27 '10 at 19:22