How to create multiple selector dropdown in HTML using Jquery

Posted on By codelizar

Single Selection in Dropdown and get value in Alert Box

HTML CODE

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no”]

<select class=”form-control min-select” name=”dropdown_single”>
<option value=”pizza”>Pizza</option>
<option value=”burger”>Burger</option>
<option value=”hotdog”>Hot Dog</option>
</select>

[/dm_code_snippet]

Jquery  CODE

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no”]

<script type=”text/javascript”>

$(document).ready(function(){
$(‘select[name=”dropdown_single”]’).change(function() {
alert($(this).val())
});

</script>

[/dm_code_snippet]

Multiple Selection in Dropdown and get value in Alert Box

HTML CODE

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no”]

<select class=”form-control min-select” multiple name=”dropdown_multi[ ]”>
<option value=”pizza”>Pizza</option>
<option value=”burger”>Burger</option>
<option value=”hotdog”>Hot Dog</option>
</select>

[/dm_code_snippet]

 

Jquery  CODE

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no”]

<script type=”text/javascript”>

$(document).ready(function(){
$(‘select[name=”dropdown_multi[]”]’).change(function() {
alert($(this).val())
});
});

</script>

[/dm_code_snippet]