Add options to a DropDownList using jQuery in Code Igniter

Question

Hello,

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?

http://stackoverflow.com/questions/317095/how-do-i-add-options-to-a-dropdownlist-using-jquery

Thanks!

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

Answer 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...".