如何防止默认应用的值

时间：2016-07-05 17:55:40

标签： html css html5 forms css3

我已经添加了演示，如下所示

默认情况下应用了options个值usa和asia。

首先，我需要在默认情况下为这两列添加占位符。

对于每个标签，占位符应该是不同的，我该如何实现？

$('#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>

2 个答案:

答案 0 :(得分：1)

使用option和value="0"

添加selected

要隐藏默认值，假设这是一个jquery插件，则需要使用：

.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>

答案 1 :(得分：1)

<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>
相关问题
最新问题