I have included a demo below for your reference
There are two default options values: usa and asia.
Initially, I had to add a placeholder to both columns by default.
Furthermore, I needed the placeholder to be unique for each tag. How can I accomplish this?
$('#countries').scombobox({
fullMatch: true
});
$('#continents').scombobox({
fullMatch: true,
highlight: false
});body {
padding: 23px 0 0 0;
font-family: Arial, 'sans-serif';
font-size: 90%;
color: #333;
background: #FAFAFA;
}
.scombobox {
position: relative;
margin: 5px;
}
.scombobox select {
display: none;
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='//cdn.rawgit.com/vijaykumarcmeseo/250f949a8de865b38e7e34bd9101e6f2/raw/670276916b77a4162e983e72aa2226cb645a6315/v.js' type='text/javascript'></script>
<script src='//cdn.rawgit.com/vijaykumarcmeseo/a9c7f54e83a228e54212c2c78a8b3422/raw/de75136be3a9beb9e4ab1538fd765e79acc58e00/lz.js' type='text/javascript'></script>
<select id="countries">
<option value="1"></option>
<option value="2">india</option>
</select>
<select id="continents">
<option value="1"></option>
<option value="2">northamerica</option>
</select>