Jquery deselect the select drop down box sample code

There are three select drop-down boxes
One big class, two small classes hidden, need to select the big class, the small class shows at the same time clear the other small class selected items
The demand is kind of...

Here are three selects:

<select name="pWaqqqy" id="sel_type" onchange="selectFunction()">
        <option value=""> all </option>
        <option value="7">aa</option>
        <option value="8">bb</option>
    </select>
    <select name="pWay" id="sel_children0" style="display:none;">
        <option value=""> all </option>
        <option value="5">a</option>
        <option value="3">a</option>
        <option value="1">a</option>
        <option value="2">a</option>
        <option value="6">a</option>
    </select>
    <select name="pWay" id="sel_children1" style="display:none;">
        <option value=""> all </option>
        <option value="4">b</option>
    </select>

Jquery extension, when called, use $("select").removeselected ();

jQuery.fn.removeSelected = function() {
    this.val("");
};

When the category selection box is selected, call the selectFunction() method:

function selectFunction(){
            if($("#sel_type").val()=="7"){
                 $("#sel_children0").show();
                 $("#sel_children1").hide();
                 $("#sel_children1").removeSelected();
             }else if($("#sel_type").val()=="8"){
                 $("#sel_children1").show();
                 $("#sel_children0").hide();
                 $("#sel_children0").removeSelected();
             }else{
                 $("#sel_children0").hide().removeSelected();
                 $("#sel_children1").hide().removeSelected();
             }
        }

The premise is to introduce the jquery.js file first