Close the Select list after selection using jquery events

Close the Select list after selection using jquery events :- once i have faced such a requirement where i need to close the select list, that’s why i wrote it here for you .

In this post we are going to answer the problem “Close the Select list after selection done using jquery events” :-

Generally we use HTML select list and list is closed automatically so our work is done ,but here we want a functionality in which we have more than oneĀ  HTML Select List

IDCountry
1India
2US
3UK
4Japan
IDcountry_idState
11ABC
22XYZ
33LMP
44OPQ

 

We wants to close the Select list after select using jquery event

HTMLCODE:-

<select class=”form-control features” id=”color2″ >
<option value=”newvalue” >Select Color </option>
<option>Gold </option>
<option> Purple </option>
<option>Black </option>
<option>Grey </option>
</select>
</div>

JS CODE:-

<sctipt>

$(“#color2”).click(function(){

//$(“#def”).text($(this).text());
//$(this).hide();
$(“#color2”).attr(“size”, 0);
});

</script>

Open the select Jquery list

Check all events in jquery

how to open the select list on jquery event or click

We wants such functionality in some cases like:-

There are two drop down first called ‘Select State’ Than ‘Select City’,’Select City’ is dependent on ‘Select State’ List in that case we want when someone select ‘Select State’ from options than ‘Select City’ drop down should be opened to show ‘Select City’ is also compulsory with .

Or

There is Ajax populated drop down and we wants to open that with jquery event

HTML CODE:-

<div id=”newcolor”>
<select class=”form-control features” id=”color2″ >
<option value=”newvalue” selected=”selected”>Select color </option>
<option>Gold </option>
<option>Purple </option>
<option>Black </option>
<option>Grey </option>
</select>
</div>

JS CODE:-

<Script>

$(document).ready(function(){
$(“#color2”).attr(“size”, 6);
});

</Script>