JQuery dynamically updates a "different" option when selected

Question

I am working on a project that will use a variety of selected menus to enter various data. I would like to include the “other” option directly in select, which will lead to a simple dialog and allow users to enter a custom value (if necessary), similar to the following javascript code:

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

which works with a choice:

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

And displays a tooltip that will update this feature using user text.

I would like to do something similar using jquery so that I can expand the possibilities and learn a bit of jquery, but I am having trouble running.

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), "" . 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);

, , . ,

/**
 * @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 );
    });
};