javascript - 使用选项中的按钮创建选择输入

Question

可以使用选项内的按钮或链接创建选择输入吗？我想用它来列出一些值，并在选项中提供带有“创建值”按钮的选项。我不知道这是否可能。我尝试使用 href，但它将其视为文本。

这将是理想的场景:

<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>

我已经搜索过，但没有成功。有人知道 jQuery 插件或类似的东西可能有用吗？

Answer 1

这是一个简单的实现:

$('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);
    }
});

当然，这可以做得更好、更干净，但这只是一个开始。

Demonstration

<小时/>

阅读您的评论后，您似乎只是想在用户选择给定选项时将其重定向到另一个表单。在这种情况下，您可以简单地执行以下操作:

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