如何隐藏 <select>通过onchange元素

Question

I have an element which is set to display:none in css. When the parent element gets clicked then the select appears through

document.getElementById('selectId').style.display = 'block';

Now I want that after some option is selected, the selector disappears.

When calling style.display = 'none' from onchange then it blinks for a fraction of a second and is again visible. I even checked with console.log(obj.style.display) and indeed the display changes quick.

How can I achieve this behavior: display = 'none' by onchange ?

Pure JavsScript or JQuery does not matter

Edit: It looks like the onchange event on the <select> triggers the onclick for the parent which resets the display to 'block'.

Code and Solution : on the suggestion from @AndyG I modified the function which gets called by the onchange event like this:

function selChanged(obj) {
    $(obj).click(function(event){
        event.stopPropagation();
    });
    obj.style.display = 'block';
}

And now it wont trigger the parent 'onclick' anymore. Here the html code:

<td onclick="showSelect(selId)">
    <select id="selId" onchange="selChanged(this)">
       <option>
         ....
       </option>
</td>

Answer 1

If the selection is changed by clicking an option, this click event will bubble up to the parent element, causing the select to reappear.

event.stopPropagation(); in the change event will prevent this bubbling to the parent.

Answer 2

Whit jQuery..

$('#selectId').hide() to hide it

$('#selectId').show() to show it

Answer 3

Try this:

$(function() {
    $('select').on('change', function() {
        $(this).hide();
    });
});