How to hide elements with specific attribute values with Jquery

Something like this:

<li language="English"> Australia </li>
<li language="English"> America </li>
<li language="French"> France </li>
<li language="French English"> Canada </li>
<li langauge="German"> Germany </li>

$('li').not("[language*='English']").hide();

Should go like this, using the "contains" attribute selector http://api.jquery.com/category/selectors/attribute-selectors/ -

$('li').not('[language*="English"]').hide();

Here is a fiddle - http://jsfiddle.net/caySY/

Just do this way

$("li:not([language*='English'])").hide();

Refer LIVE DEMO

HTML:

<ul>
    <li language="English"> Australia </li>
    <li language="English"> America </li>
    <li language="French"> France </li>
    <li language="French"> Canada </li>
    <li langauge="German"> Germany </li>
    <li language="English,French"> Canada1 </li>
</ul>

OUTPUT:

<li language="English"> Australia </li>
<li language="English"> America </li>
<li language="English,French"> Canada1 </li>

A relatively simple solution, using a select element to handle the language-choice:

$('#language').change(function(){
    // storing the language chosen in the select element
    var v = this.value;
    /* iterates over all li elements, and hides them,
       then filters the matched elements to see which elements
       contain the relevant language in the 'language' attribute: */
    $('ul li').hide().filter(function(i){
        return this.getAttribute('language').indexOf(v) !== -1;
    // shows the elements that contain the relevant language:
    }).show();
});

JS Fiddle demo.

Or a slightly different approach:

$('#language').change(function () {
    var v = this.value;
    $('ul li').each(function(){
        var l = this.getAttribute('language');
        return $(this).toggle(l.indexOf(v) !== -1);
    });
});

JS Fiddle demo.

Both the above work with the following HTML:

<label for="language">Show:</label>
<select name="language" id="language">
    <option>English</option>
    <option>French</option>
    <option>German</option>
</select>
<ul>
    <li language="English">Australia</li>
    <li language="English">America</li>
    <li language="French">France</li>
    <li language="English French">Canada</li>
    <li language="German">Germany</li>
</ul>

Incidentally please note the corrected spelling of 'language' in the final li element.

Further, it'd be better to correct your HTML to use a valid (under HTML5) data-* attribute, such as data-language (to use the obvious):

<ul>
    <li data-language="English">Australia</li>
    <li data-language="English">America</li>
    <li data-language="French">France</li>
    <li data-language="English French">Canada</li>
    <li data-language="German">Germany</li>
</ul>

And the above code amended, to use that modified HTML:

$('#language').change(function(){
    // storing the language chosen in the select element
    var v = this.value;
    /* iterates over all li elements, and hides them,
           then filters the matched elements to see which elements
           contain the relevant language in the 'language' attribute: */
        $('ul li').hide().filter(function(i){
            return $(this).data('language').indexOf(v) !== -1;
            // shows the elements that contain the relevant language:
        }).show();
    });

JS Fiddle demo.

$('#language').change(function () {
    var v = this.value;
    $('ul li').each(function(){
        var self = $(this),
            l = self.data('language');
        return self.toggle(l.indexOf(v) !== -1);
    });
});

JS Fiddle demo.

References:

• change().
• data().
• each().
• filter().
• hide().
• show().
• toggle().

You can use Attribute selector:-

$('li[language]').hide(); //hide all with attribute language
$('li[language=English]').show() //show the ones with English

If you have multiple string in your language selector use the contains selector

http://api.jquery.com/attribute-contains-selector/

$('li[language*="English"]').hide();