Question

180

Create select input with button in options

rated 0 times [ 187] [ 7] / answers: 1 / hits: 25744 / 11 Years ago, fri, january 17, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

manuel

Add To Favorites

Follow

Total Points: 747

Total Questions: 96

Total Answers: 95

Location: Argentina

Member since Thu, Mar 18, 2021

3 Years ago

answered 11 Years ago kamronr · Accepted Answer

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

    }

});