jQuery hide() not working

I am trying to hide a dropdown (select element) using hide but not able to. Below is the jQuery code I am using.

$('.myClass').find('select[name=xyz]').hide();

Exception in chrome : object xyz has no method 'hide'

Corresponding HTML

<div class="myClass">
        <select id="xyz" name="xyz">
                    <option>option1</option>
                    <option>option2</option>
                    </select>
        &l开发者_开发百科t;select id="123" name="123">
                    <option>option3</option>
                    <option>option4</option>
                    </select>
</div>

EDIT: I see that you have now edited the HTML in your post and added the name attribute that was originally missing. Your HTML and javascript works for me in this jsFiddle so if it isn't working for you then it's because you have something else wrong in your page or duplicate IDs or something like that. Even so, I suggest you just use the simpler form that I suggest below as it's simpler, faster and more foolproof.

Previous Answer Before OP was edited:

I see no name attribute for you to match. If you want to get the select tag with the xyz id, then use this:

$("#xyz").hide();

IDs much be unique in the page so you can just address it directly, no need to do all the other stuff to find it. If you were doing it the way you were because your IDs weren't unique in the page, then you have to fix that as you will get unpredictable results in different browsers with conflicting IDs.

there's no [name=xyz]

change it to id

$('.myClass #xyz').hide();

http://sandbox.phpcode.eu/g/1acce/1

you have no name in your select

$('.myClass #xyz').hide();

you have to add the name if you ever plan to submit that. Final, note: IDs and attributes in general shall not start with a number, but with a letter.

<div class="myClass">
        <select name="xyz" id="xyz">
                    <option>option1</option>
                    <option>option2</option>
                    </select>
        <select name="abc" id="abc">
                    <option>option3</option>
                    <option>option4</option>
                    </select>
</div>

You have the id of the select labeled xyz.

$('.myClass').find('select#xyz').hide();

Or Better yet

$('#xyz').hide();

The jQuery [attribute=value] selector searches for the specific attribute.

The jQuery id selector will search the id of the element.