Create select input with button in options

Question

It's possible to create a select input with a button or a link inside the options? I'd like to use it to list some values, and to have the option with a button to "Create Value" inside the options. I don't know if this is possible. I tried it with a href, but it treat it as text.

This would be the ideal scenario:

<select name="things">
    <option value="1">Thing One</option>
    <option value="2">Thing Two</option>
    <option value="3">Thing Three</option>
    <option value=""><button>New Thing</button></option>
</select>

I've search, but with no luck. Does somebody knows an jQuery plugin or something like might work?

No, you can't put any HTML inside of an option element, just text. You'll need to use either an list element to emulate a select, or use a change-handler on the select element. — David Thomas
– David Thomas, Commented Jan 17, 2014 at 23:47

p.s.w.g · Accepted Answer · 2014-01-17 23:44:02Z

9

Here's a simple implementation:

$('select[name=things]').change(function() {
    if ($(this).val() == '')
    {
        var newThing = prompt('Enter a name for the new thing:');
        var newValue = $('option', this).length;
        $('<option>')
            .text(newThing)
            .attr('value', newValue)
            .insertBefore($('option[value=]', this));
        $(this).val(newValue);
    }
});

Of course, this could be done better, and more cleanly, but it's a start.

Demonstration

After reading your comments, it appears you simply want to redirect the user to another form when they select a given option. In that case, you can simply do this:

$('select[name=things]').change(function() {
    if ($(this).val() == '')
    {
        window.location.href = 'CreateThingForm'; // Replace with the actual URL
    }
});

answered Jan 17, 2014 at 23:44

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2014-01-17 23:43:50Z

1

You shouldn't do it this way, don't put button inside option.

alternatively you can :

<select name="things" onchange="checkAndAddOption(this)">

or

<select name="things" onclick="checkAndAddOption(this)">
.
.
.
</select>
<script>
function checkAndAddOption(selectElement) {
   if (selectElement.value === "") {
        var opt = document.createElement('option');
        opt.value = 'newVal';
        opt.innerHTML = 'textToDisplay';
        selectElement.appendChild(opt);
   }
}
</script>

edited Jan 17, 2014 at 23:43

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Jan 17, 2014 at 23:40

Shehabic

6,89711 gold badges56 silver badges95 bronze badges

2 Comments

arielcr Over a year ago

I don't want to do this, what I need is to redirect the user to the "Create Thing Form", when they click on the link or button inside the select.

Shehabic Over a year ago

Then, simply change the code to create option to location.href = 'url-of-form'

Collectives™ on Stack Overflow

Create select input with button in options

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related