Fatal编程技术网
  • javascript/
  • Javascript 带文本输入选项的Jquery selectmenu插件

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

javascript jquery html

Javascript 带文本输入选项的Jquery selectmenu插件,javascript,jquery,html,Javascript,Jquery,Html,我需要jquery插件，它将转换我的简单 <select> <option>text</option> </select> 文本 在完全可定制的列表中，例如列表或列表，我发现了很多此类插件，但没有一个插件可以选择键入内容并将其设置为选项 假设我有一个列表： <select> <option value="text">text</option> <option value="other"&g

我需要jquery插件，它将转换我的简单

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


文本
在完全可定制的列表中，例如
列表或
列表，我发现了很多此类插件，但没有一个插件可以选择键入内容并将其设置为选项

假设我有一个列表：

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


文本
其他
现在，我想把其他选项转换成
，我很确定必须有一个插件可以做到这一点

我已经做了一个例子，左边是我当前的插件，右边是我需要的，我知道我可以编辑我当前的插件，但这对我来说太大了，需要很多时间

试试这个，如果选择框值为其他值，这个小脚本将在选择框后创建一个文本输入。新文本输入与select的名称相同，以便其值覆盖select设置的文本（与其他文本相同）

如果该值不是其他值，我们只需检查文本输入是否存在并删除它（这样它就不会覆盖select值）

HTML



文本
文本
文本
其他



文本
文本
文本
其他


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

$（函数（）{
//更改时绑定所有选择
$（'select'）。在（'change'，function（）上{
//如果值为其他值
if（$（this）.val（）=='other'）{
//添加与名称匹配的文本输入，以便此输入覆盖表单中的“选择”输入
$（本）。在（''）之后；
}否则{
if（$（this）.next（）.is（'input.otherInput'））{
$（this.next（）.remove（）；
};
};
});
});​
没有jQuery插件可以做到这一点。但是，有一种方法可以将select元素转换为html表示形式，这样您就可以设置select菜单的样式。这个插件还提供了一个用于格式化文本的回调，这样在我们的例子中，我们就可以将“other”选项格式化为输入框

假设我们有以下选择：

    <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>
在这里，函数
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;
    }
要尝试此操作，请确保指向js/css文件的URL是正确的。（我已将此html文件放入demos/selectmenu文件夹，它可以工作…）。当然，您可以将按钮替换为图像。

您可以签出-它可能适合您的需要。从零开始做东西可能更容易。祝你好运。

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

结果证明这是一个非常简单的解决方案，完全符合我的要求

HTML:

例如：

您的意思是希望将选择列表转换为输入列表吗？不，不是所有列表，只有两个其他列表可以是任何内容，只有当我想将选项设置为“其他”时，我才需要输入，这意味着用户可以键入他想要的任何内容。他的解决方案非常合理，这是最简单的方法。您可以通过将原始HTML转换为伪select（删除实际的select标记并用大量div和输入替换它）来解决这个问题；或者你也可以像他那样做：让“other”选项在select后面附加一个文本输入（而不是像你所说的那样在中）。当然，如果你选择其他东西，它必须被移除。试试他的小提琴。这是一个最接近正确答案的答案，而不必从头开始写任何东西。太棒了，我自己正试图解开这些事件的绑定，因为我曾尝试让这个插件自己做这件事，但我失败了：/无论如何，我现在要尝试你的解决方案。它工作得非常完美！非常感谢您，我有这个问题已经一个多月了，现在终于解决了^^我现在需要的是将它实现到我的网站上 
    $(function(){
        selectMenu = $('select#otherselect').selectmenu({
            style:'popup',
            width: 300,
            format: 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;
    }

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

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

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