基本组件

Question

我正在开发一个项目，该项目将使用大量选择菜单输入各种数据。我想直接在select中包含一个'other'选项，它将触发一个简单的对话框，并允许用户输入一个自定义值（如果适用），类似于以下javascript代码：

<script type="text/javascript" language="javascript">
    function chkother(fld,len,idx) {
        if ((idx+1)==len) {
            other=prompt("Please indicate 'other' value:");
            fld.options[idx].value=other;
            fld.options[idx].text=other;
        }
    }
</script>

与select：

一起使用

<select onchange="chkother(this,this.options.length,this.options.selectedIndex)" name="example" id="example" class="formSelect">
<option  value=""></option>
<option  value="yes">yes</option>
<option  value="no">no</option>
<option  value="other">other</option>
</select>

并显示一个提示，用于更新用户文本选项。

我想使用jquery做类似的事情，所以我可以看一下扩展功能并学习一些jquery，但是我开始时遇到了麻烦。

Answer 1

这将帮助您入门。这将为页面上的任何选择添加功能，向选择附加一个新值（如果出现错误，则保留其他值）。

$(function() {
    $('select').change( function() {
        var value = $(this).val();
        if (!value || value == '') {
           var other = prompt( "Please indicate other value:" );
           if (!other) return false;
           $(this).append('<option value="'
                             + other
                             + '" selected="selected">'
                             + other
                             + '</option>');
        }
    });
});

Answer 2

我实际上解决了一个与此非常相似的问题，并最终编写了一个jQuery插件（jQuery.otherDropdown）来收集其他＆＃39;选择下拉列表的响应。它位于GitHub和npm上。我会分解我的方法，以便您可以按照自己的方式实施。

在我看来，这个想法是jQuery的完美用例。

基本组件

倾听您的“其他人”的声音。选项被选中

在选择输入上添加.change()事件绑定。

$('select').change( function() {
    if(this.value === 'other') {
        // Your logic here to for when/how to prompt for user input
    }
});

收听用户输入

如果您选择文字输入而不是提示（这可能是更好的用户体验），请收听模糊事件

// listen to a text area
$('input').blur( function() {
    if(this.value !== '') {
        // Logic to add the new option to the select
    }
});

// or bring up a prompt dialog
var value=prompt("Please indicate 'other' value:");
if(this.value !== '') {
    // Logic to add the new option to the select
}

添加新选项

无论您如何选择提示用户输入值，添加它都非常简单，只需通过jQuery创建元素并附加它即可。最后，您可能希望关注价值，可以使用.val()

来完成

var $option = $('<option value="' + value + '">' + value + '</option>');
$('select').append($option);
$('select').val(value);

实施例

所有这些想法都包含在这个插件中，可能是一个很好的例子，您可以使用并重用以满足您的需求。您可以看到它正常工作here

/**
 * @name jquery.otherdropdown
 * @description A small jQuery plugin to support a text area when selecting an 'Other' option in a dropdown
 * @version 1.0.2
 * @author Jonathan Stassen <jstassen.com>
 * @see https://github.com/TheBox193/jquery.otherdropdown
 */
$.fn.otherDropdown = function(options) {
    var $this = this;
    // Allow a different name/value to trigger, default to 'other'
    var opts = $.extend({}, {value: 'other'}, options);
    opts.name_lower = opts.value.toLowerCase();
    opts.name_upper = opts.value.charAt(0).toUpperCase() + opts.value.slice(1);
    opts.placeholder = opts.placeholder || opts.name_upper;

    // Bind to all change events
    $this.change( function(ev){

        // Swap in the text area if our 'other' option was chosen
        if (this.value === opts.name_lower || this.value === opts.name_upper) {
            $this.hide().after( $textInput );
            $textInput.focus();
        }
    });

    // Prepare our text input
    var $textInput = $('<input type="text" class="otherdropdown" placeholder="' + opts.placeholder + '" />');

    // Allow custom classes on the text input
    if (opts.classes) {
        $textInput.addClass(opts.classes);
    }

    // Bind to blur to swap back to select dropdown
    $textInput.blur( function(ev) {
        var value = this.value;
        this.value = '';
        this.remove();
        $this.show();

        if (value === '' || value === opts.name_lower || value === opts.name_upper) {
            return;
        }

        // If something was typed, create a new option with that value
        var $searchedOption = $this.children('[value="' + value + '"]');

        // If value doesn't exist, added it.
        if ( $searchedOption.length < 1 ) {
            var $option = $('<option value="' + value + '">' + value + '</option>');
            $this.append($option);
        }

        // Focus the value
        $this.val( value );
    });
};

Jquery动态更新select中的“other”选项

2 个答案:

基本组件

倾听您的“其他人”的声音。选项被选中

收听用户输入

添加新选项

实施例