Question

我需要jquery插件来改变我的简单

<select>
  <option>text</option>
</select>

在完全可自定义的列表中，如<lu>列表或<div>列表，我发现了很多这种插件，但没有一个可以选择输入和设置它作为一种选择。

假设我有一份清单：

<select>
  <option value="text">text</option>
  <option value="other">other</option>
</select>

现在我希望其他选项转换为<input type="text" />，我非常确定必须有插件才能实现这一点。

我已经举了一个例子它应该是什么样子，左边是我当前的插件，右边是我需要的，我知道我可以编辑我当前的插件但是它只是对我来说很重要而且它需要很多时间。

enter image description here

Answer 1

没有jQuery插件可以做到这一点。但是，有一个jQuery UI selectmenu plugin，它将select元素转换为html表示，以便您可以设置选择菜单的样式。此插件还提供了格式化文本的回调，因此在我们的示例中，我们可以将“其他”选项格式化为输入框。

假设我们有以下选择：

    <select name="otherselect" id="otherselect">
        <option value="united-states">United States</option>
        <option value="latvia" selected="selected">Latvia</option>
        <option value="france">France</option>
        <option>Other</option>
    </select>

我们可以使用以下命令创建一个选择菜单：

    $(function(){
        selectMenu = $('select#otherselect').selectmenu({
            style:'popup',
            width: 300,
            format: otherFormatting
        });
    });

在这里，函数otherFormatting是一个函数，它将格式化我们的其他选项。这是我们的功能：

    var otherFormatting = function(text){

    // if text contains 'Other' format into Other input box...
        if ( text == "Other" ) {
        var button = $('<input type="submit" onclick="selectOther(this)" value="select"/>');
        var input = $('<input class="other" type="text" value="Other..."/>');


            return $('<span/>')
            .append(input)
            .append(button)[0].outerHTML;
    }

        return text;
    }

单击按钮时调用的selectOther函数是我们将使用扩展插件的函数。单击该按钮时激活的此功能将设置我们的选择值，以便我们可以使用表单轻松提交。但是，设置新选择菜单中显示的值（而不是在选择框中显示输入框）。

我们需要扩展这个插件，基本上是jQuery UI widget。但是，由于插件绑定了一些事件，使我们无法使输入字段和按钮工作，我们需要取消绑定其中的一些事件。我们在打开选择菜单时执行此操作。为此，我们需要覆盖窗口小部件的open函数，调用解除某些事件的函数，然后使用原始的open函数打开菜单。

把这一切放在一起：

<!DOCTYPE html>
<html>
    <head>
    <title>Demo Page for jQuery UI selectmenu</title>

    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
    <style type="text/css">
        body {font-size: 62.5%; font-family: "Verdana",sans-serif; }
        fieldset { border: 0; }
        label, select, .ui-select-menu { float: left; margin-right: 10px; }
        select { width: 200px; }
    </style>
    <script type="text/javascript">
        // We need to able to call the original open method, save intoIf you need to call original method
        var fn_open = $.ui.selectmenu.prototype.open;
        $.widget("ui.selectmenu", $.extend({}, $.ui.selectmenu.prototype, {
            open : function() {
                // Every the selectmenu is opened, unbind some events...
                this._unbindEvents();
                fn_open.apply(this, arguments);
            },
            _unbindEvents : function() {
                var el = $(this.list).find('li:has(input.other)').eq(0);
                // unbind events, we need a different event here...
                el.unbind('mouseup');
                el.unbind('mousedown');
                el.bind('mousedown', function() {
                    // We need to call focus here explicitly
                    $(this).find('input.other').eq(0).focus();

                    // Empty field on click...
                    if ( $(this).find('input.other').eq(0).val() == 'Other...' )
                         $(this).find('input.other').eq(0).val("");
                });
                // Unbind keydown, because otherwise we cannot type in our textfield....
                this.list.unbind('keydown');
                // We only need to return false on the mousedown event.
                this.list.unbind('mousedown.selectmenu mouseup.selectmenu');
                this.list.bind('mousedown', function() {
                        return false;
                });
            },
            selectOther : function(el) {
                var button = $(el);

                // li item contains the index
                var itemIndex = button.parent().parent().parent().data('index');
                var changed = itemIndex != this._selectedIndex();

                // Get the value of the input field
                var newVal = button.prev().val();
                this.index(itemIndex);
                // Update the display value in the styled select menu.
                this.newelement.find('.' + this.widgetBaseClass + '-status').html(newVal);

                // Update the value and html of the option in the original select.
                $(this.element[0].options[itemIndex]).val(newVal).html(newVal);

                // Call the select, change and close methods
                var e = jQuery.Event("mouseup");
                this.select(e);
                if ( changed )
                    this.change(e);
                this.close(e);
            }
        }));

        var selectMenu;
        $(function(){
            selectMenu = $('select#otherselect').selectmenu({
                style:'popup',
                width: 300,
                format: otherFormatting
            });
        });

        function selectOther(el) {
            // Call our self defined selectOther function.
            selectMenu.selectmenu('selectOther', el);
        }

        //a custom format option callback
        var otherFormatting = function(text){

            // if text contains 'Other' format into Other input box...
            if ( text == "Other" ) {
                var button = $('<input type="submit" onclick="selectOther(this)" value="select"/>');
                var input = $('<input class="other" type="text" value="Other..."/>');


                return $('<span/>')
                    .append(input)
                    .append(button)[0].outerHTML;
            }

            return text;
        }
    </script>
</head>
<body>
    <h2>Select with Other option input field</h2>
    <fieldset>
        <label for="otherselect">Select a value:</label>
        <select name="otherselect" id="otherselect">
            <option value="united-states">United States</option>
            <option value="latvia" selected="selected">Latvia</option>
            <option value="france">France</option>
            <option>Other</option>
        </select>
    </fieldset>
    <button onclick="console.log($('#otherselect').val());">Test</button>
</body>
</html>

要尝试此操作，download the plugin here并确保js / css文件的网址正确无误。（我把这个html文件放到demos / selectmenu文件夹中，它可以工作......）。当然，你可以用图像替换按钮。

Answer 2

试试这个，如果选择框值为other，这个小脚本将在选择框后面创建一个文本输入。新文本作为select的同名输入，以便其值覆盖select所设置的值（因为它是其他的）

如果该值不是其他值，我们只检查文本输入的存在并将其删除（因此它不会覆盖选择值）

http://jsfiddle.net/cW725/1/

HTML

<form>

    <p>
        <select>
            <option value="text">text</option>
            <option value="text">text</option>
            <option value="text">text</option>
            <option value="other">other</option>
        </select>
    </p>

    <p>
        <select>
            <option value="text">text</option>
            <option value="text">text</option>
            <option value="text">text</option>
            <option value="other">other</option>
        </select>
    </p>

</form>

的jQuery

$(function() {

    // bind all select on change
    $('select').on('change', function() {

        // if value is other
        if ($(this).val() == 'other') {

            // add a text input we match the name so that this input overwrite the select one as after in the form
            $(this).after('<input type="text" name="' + $(this).attr('name') + '" class="otherInput" />');

        } else {

            if ($(this).next().is('input.otherInput')) {
                $(this).next().remove();
            };
        };
    });
});

Answer 3

我正在寻找一个jquery“选择或编辑”解决方案，并发现这可以在select2 plugin的帮助下完成。

原来是一个非常简单的解决方案，完全符合我的要求。

HTML：

<select name="otherselect" id="otherselect">
    <option value="united-states">United States</option>
    <option value="latvia" selected="selected">Latvia</option>
    <option value="france">France</option>
</select>

JS：

$('#otherselect').select2({tags: true});

实施例： https://jsfiddle.net/h0qp37jk/

Answer 4

您可以查看chosen.js - 它可能符合您的需求。从头开始制作东西可能更容易。祝你好运。

带有文本输入选项的Jquery selectmenu插件

4 个答案: