How to prevent the values applied by default - html

Question

I have added the demo as you can see below
2 options values usa and asia applied by default.
Firstly I needed to add placeholder to both the columns by default.
And placeholder should be different for each the tags how can I achieve 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;
}
.scombobox-display {
width: 100%;
height: 100%;
padding: 2px 4px;
border: 1px solid #CCC;
border-radius: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.scombobox-display:focus {
box-shadow: 0 0 3px #CCC;
outline: none;
}
.scombobox-display:disabled {
background: #F0F0F0;
}
.scombobox-display.scombobox-invalid {
background: #FFCCD4;
}
.scombobox-display-div {
border: 1px solid #CCC;
border-radius: 4px;
cursor: pointer;
}
.scombobox-display-div-holder {
padding: 2px;
}
.scombobox-display-div-item {
border: 1px solid #CCC;
margin: 2px;
border-radius: 4px;
float: left;
height: 100%;
max-width: 150px;
padding: 4px 18px 4px 8px;
position: relative;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
cursor: default;
background: #F8F8F8;
display: none;
}
.scombobox-display-div-item-text {
max-width: 140px;
overflow: hidden;
}
.scombobox-display-div-item-remove {
position: absolute;
right: 2px;
top: 2px;
background: #A0A0A0;
border-radius: 100px;
color: white;
cursor: pointer;
line-height: 90%;
padding: 1px 3px 0px;
}
.scombobox-display-div-item-remove:hover {
background: #408CBE;
}
.scombobox-display-div-item-remove:active {
background: #3075A3;
}
.scombobox-list {
display: none;
position: absolute;
max-height: 400px;
min-width: 100%;
max-width: 300%;
white-space: nowrap;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow-y: auto;
background: white;
border: 1px solid #CCC;
border-top: none;
/* instead of margin-top: -1px */
border-radius: 4px;
box-shadow: 0 0 3px #CCC;
z-index: 10;
}
.scombobox-list p {
cursor: pointer;
margin: 0;
padding: 5px;
}
.scombobox-list p input[type="checkbox"] {
margin-right: 8px;
vertical-align: middle;
}
.scombobox-list p:hover,
.scombobox-list p.scombobox-hovered {
background-color: #E9EFFC;
}
.scombobox-list p.scombobox-separator {
height: 2px;
padding: 0;
cursor: default;
background: #EEE;
}
.scombobox-list p.scombobox-header {
cursor: default;
background: #EEE;
}
.scombobox-dropdown-arrow {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
}
.scombobox-dropdown-arrow:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.scombobox-dropdown-background {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: white;
border: 1px solid #CCC;
border-radius: 0 4px 4px 0;
border-left: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.scombobox-dropdown-background-invalid {
border-left: 1px solid #CCC;
}
.scombobox-marker {
background: #958FFF;
color: white;
border-radius: 2px;
padding: 0 2px;
margin: 0 2px;
}
.scombobox input[type="checkbox"] {
cursor: pointer;
}
.scombobox-disabled .scombobox-dropdown-background,
.scombobox-disabled .scombobox-dropdown-arrow {
display: none;
}
.scombobox-disabled .scombobox-display-div {
background: #F8F8F8;
cursor: default;
}
<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>

Answer 1

Add an option with value="0" and selected
To hide the default value, given this is a jquery plugin, you need to use this:
.scombobox-display:focus + .scombobox-list p:first-of-type span {
display: none
}
$('#countries').scombobox({
fullMatch: true
});
$('#continents').scombobox({
fullMatch: true,
highlight: false
});
.scombobox-display:focus + .scombobox-list p:first-of-type span {
display: none
}
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;
}
.scombobox-display {
width: 100%;
height: 100%;
padding: 2px 4px;
border: 1px solid #CCC;
border-radius: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.scombobox-display:focus {
box-shadow: 0 0 3px #CCC;
outline: none;
}
.scombobox-display:disabled {
background: #F0F0F0;
}
.scombobox-display.scombobox-invalid {
background: #FFCCD4;
}
.scombobox-display-div {
border: 1px solid #CCC;
border-radius: 4px;
cursor: pointer;
}
.scombobox-display-div-holder {
padding: 2px;
}
.scombobox-display-div-item {
border: 1px solid #CCC;
margin: 2px;
border-radius: 4px;
float: left;
height: 100%;
max-width: 150px;
padding: 4px 18px 4px 8px;
position: relative;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
cursor: default;
background: #F8F8F8;
display: none;
}
.scombobox-display-div-item-text {
max-width: 140px;
overflow: hidden;
}
.scombobox-display-div-item-remove {
position: absolute;
right: 2px;
top: 2px;
background: #A0A0A0;
border-radius: 100px;
color: white;
cursor: pointer;
line-height: 90%;
padding: 1px 3px 0px;
}
.scombobox-display-div-item-remove:hover {
background: #408CBE;
}
.scombobox-display-div-item-remove:active {
background: #3075A3;
}
.scombobox-list {
display: none;
position: absolute;
max-height: 400px;
min-width: 100%;
max-width: 300%;
white-space: nowrap;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow-y: auto;
background: white;
border: 1px solid #CCC;
border-top: none;
/* instead of margin-top: -1px */
border-radius: 4px;
box-shadow: 0 0 3px #CCC;
z-index: 10;
}
.scombobox-list p {
cursor: pointer;
margin: 0;
padding: 5px;
}
.scombobox-list p input[type="checkbox"] {
margin-right: 8px;
vertical-align: middle;
}
.scombobox-list p:hover,
.scombobox-list p.scombobox-hovered {
background-color: #E9EFFC;
}
.scombobox-list p.scombobox-separator {
height: 2px;
padding: 0;
cursor: default;
background: #EEE;
}
.scombobox-list p.scombobox-header {
cursor: default;
background: #EEE;
}
.scombobox-dropdown-arrow {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
}
.scombobox-dropdown-arrow:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.scombobox-dropdown-background {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: white;
border: 1px solid #CCC;
border-radius: 0 4px 4px 0;
border-left: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.scombobox-dropdown-background-invalid {
border-left: 1px solid #CCC;
}
.scombobox-marker {
background: #958FFF;
color: white;
border-radius: 2px;
padding: 0 2px;
margin: 0 2px;
}
.scombobox input[type="checkbox"] {
cursor: pointer;
}
.scombobox-disabled .scombobox-dropdown-background,
.scombobox-disabled .scombobox-dropdown-arrow {
display: none;
}
.scombobox-disabled .scombobox-display-div {
background: #F8F8F8;
cursor: default;
}
i
<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="0" selected>Choose..</option>
<option value="1">usa</option>
<option value="2">india</option>
</select>
<select id="continents">
<option value="0" selected>Choose..</option>
<option value="1">asia</option>
<option value="2">northamerica</option>
</select>

Answer 2

<select id="countries">
<option style="font-size:20px;display:none;">Select a country</option>
<option value="1">usa</option>
<option value="2">india</option>
</select>
<select id="continents">
<option style="font-size:20px;display:none;" value="">Select a continent</option>
<option value="1">asia</option>
<option value="2">northamerica</option>
</select>