提醒选定的jQuery下拉列表中的文本

Question

I am using jquery chosen , with the specific component multiple select .

I want to listen if something is typed in the chosen text bar and alert the content typed in that.

To achieve that I have:

HTML:

<select id="searchZip" name="types[]" multiple class="searchZip chosen-select-no-results" tabindex="12">
</select>

JS:

<script type="text/javascript">
    var config = {
        '.chosen-select': {},
        '.chosen-select-deselect': {
            allow_single_deselect: true
        },
        '.chosen-select-no-single': {
            disable_search_threshold: 10
        },
        '.chosen-select-no-results': {
            no_results_text: 'Oops, nothing found!'
        },
        '.chosen-select-width': {
            width: "95%"
        }
    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }
</script>

I want to call alert() if something is typed in the search box. How can I do that?

$("#searchZip").chosen().change( alert("a"); );

When I do this, I always get this error:

Uncaught SyntaxError: missing ) after argument list

How can I call alert with the input that is typed in the chosen input?

Answer 1

Inside the alert box there should not be any semicolon as it terminates the statement..

just write .change(alert("a"));

Answer 2

You need to change the following line from this:

$("#searchZip").chosen().change( alert("a"); );

To this:

$("#searchZip").chosen().change( alert("a") );

When JavaScript sees a ; , it assumes it is the end of the line. Since your ; was before inside the .change() , JavaScript did not see a closing ) for .change() , so it producedthe following error stating that it was missing ) after argument list

Uncaught SyntaxError: missing ) after argument list

Answer 3

That line passed to function .change() should be a function. alert("a") is a function invocation (statement). That invocation could be moved into lambda (anonymous) function:

$("#searchZip").chosen().change( function() {alert("a"); });

Or a named function could be used:

function alertA() {
    alert("a");
}
$("#searchZip").chosen().change( alertA );

For more information, refer to the MDN documentation on functions as callbacks .

The " documentation " is a little lacking as far as the arguments passed to .change() , but change calls .trigger() so the arguments are:

• event : event

  contains information about the event

• extraParam : Object

  contains information about the selected option

The extraParam can be used to get the text of the selected option:

function alertA(event, result) {
    alert(result.selected);
}

See a demonstration of this below.

 $('.chosen-select-no-results').chosen({ no_results_text: 'Oops, nothing found!' }); function alertA(event, result) { alert(result.selected); } $("#searchZip").chosen().change(alertA); 

 <link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script> <select id="searchZip" name="types[]" multiple class="searchZip chosen-select-no-results" tabindex="12"> <option>Cat</option> <option>Dog</option> <option>Zebra</option> </select>