从下拉菜单中选择选项时更改div内容

Question

我正在使用jquery，html和css select模板，并且向jquery添加了一些其他代码，因此对于每个select选项，都会显示一个特定的div。由于我是jquery的新手，所以我不明白为什么这部分不起作用

HTML是：

    <div class="center">
    <select name="sources" id="sources" class="custom-select sources" 
    placeholder="chose">
      <option value="profile">Profile</option>
      <option value="word">Word</option>
    </select>
    </div>
    <div id="ic">IC</div>
    <div id="passport">passport</div>

jquery是：

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");
  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
      });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);

});

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

$("#sources").on("change", function() {
  if(this.value == "profile") {
    $("#ic").show();
    $("#passport").hide();
  } else {
    $("#ic").hide();
    $("#passport").show();
  }
});

CSS是：

body {
  background: #ededed;
  font-family: 'Open Sans', sans-serif;
}
.center {
  position: absolute;
  display: inline-block;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

#ic, #passport { display: none; }

/** Custom Select **/
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}
  .custom-select-wrapper select {
    display: none;
  }
  .custom-select {
    position: relative;
    display: inline-block;
  }
    .custom-select-trigger {
      position: relative;
      display: block;
      width: 130px;
      padding: 0 84px 0 22px;
      font-size: 22px;
      font-weight: 300;
      color: #fff;
      line-height: 60px;
      background: #5c9cd8;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
    }
      .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
      }
      .custom-select.opened .custom-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
      }
  .custom-options {
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 100%;
    margin: 15px 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
  }
    .custom-options:before {
      position: absolute;
      display: block;
      content: '';
      bottom: 100%; right: 25px;
      width: 7px; height: 7px;
      margin-bottom: -4px;
      border-top: 1px solid #b5b5b5;
      border-left: 1px solid #b5b5b5;
      background: #fff;
      transform: rotate(45deg);
      transition: all .4s ease-in-out;
    }
    .option-hover:before {
      background: #f9f9f9;
    }
    .custom-option {
      position: relative;
      display: block;
      padding: 0 22px;
      border-bottom: 1px solid #b5b5b5;
      font-size: 18px;
      font-weight: 600;
      color: #b5b5b5;
      line-height: 47px;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
    .custom-option:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #f9f9f9;
    }

jquery代码的最后一部分（.on（“ chnge”））是我添加的，但是没有结果。我希望选择Profile时显示ic div，否则显示另一个div。谢谢。

Answer 1

您只需移动您的在线代码即可点击功能。基本上，您不会直接更改选择，而是使用click函数中的代码。

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());

  if($(this).data("value") == "profile") {
    $("#ic").show();
    $("#passport").hide();
  } else {
    $("#ic").hide();
    $("#passport").show();
  }
});

Answer 2

问题在于您不再触发HTML select的change事件。当您更改并添加自定义选择后。

您可以将if语句移至click上的custom-option函数内，并在其中显示/隐藏div。

请参见下文（我还添加了一些代码注释）。

在选择if的{​​{1}}属性时，请确保在$(this).value中将$(this).data('value')更改为data-value

我不会进入代码本身，但是需要一些重构。

custom-option

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");

  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        //  $(this).attr("class") will return undefined because this = option and options do not have class
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
      });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);

});

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
  
  //change 
   //if($(this).data("value") === "profile") {
    // $("#ic").show();
     //$("#passport").hide();
   //} else {
     //$("#ic").hide();
     //$("#passport").show();
   //}
   
    // in case of switch
    switch($(this).data("value")) {
      case 'profile':
       $("#ic").show();
       $(".custom-content:not(#ic)").hide()
      break;
      case 'example':
       $("#exampleId").show();
       $(".custom-content:not(#exampleId)").hide()
      break;
      default:
        $(".custom-content:not(#passport)").hide()
        $("#passport").show();
     }
    
});

$(".sources").on("change", function() {
	// this is not getting triggered
});

body {
  background: #ededed;
  font-family: 'Open Sans', sans-serif;
}
.center {
  position: absolute;
  display: inline-block;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/*#ic, #passport { display: none; }*/
.custom-content { display: none}

/** Custom Select **/
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}
  .custom-select-wrapper select {
    display: none;
  }
  .custom-select {
    position: relative;
    display: inline-block;
  }
    .custom-select-trigger {
      position: relative;
      display: block;
      width: 130px;
      padding: 0 84px 0 22px;
      font-size: 22px;
      font-weight: 300;
      color: #fff;
      line-height: 60px;
      background: #5c9cd8;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
    }
      .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
      }
      .custom-select.opened .custom-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
      }
  .custom-options {
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 100%;
    margin: 15px 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
  }
    .custom-options:before {
      position: absolute;
      display: block;
      content: '';
      bottom: 100%; right: 25px;
      width: 7px; height: 7px;
      margin-bottom: -4px;
      border-top: 1px solid #b5b5b5;
      border-left: 1px solid #b5b5b5;
      background: #fff;
      transform: rotate(45deg);
      transition: all .4s ease-in-out;
    }
    .option-hover:before {
      background: #f9f9f9;
    }
    .custom-option {
      position: relative;
      display: block;
      padding: 0 22px;
      border-bottom: 1px solid #b5b5b5;
      font-size: 18px;
      font-weight: 600;
      color: #b5b5b5;
      line-height: 47px;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
    .custom-option:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #f9f9f9;
    }

编辑根据您的评论，我添加了<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="center"> <select name="sources" id="sources" class="custom-select sources" placeholder="chose"> <option value="profile">Profile</option> <option value="example">Example</option> <option value="word">Word</option> </select> </div> <div class="custom-content" id="ic">IC</div> <div class="custom-content" id="exampleId">Example</div> <div class="custom-content" id="passport">passport</div>语句 您只需要设置将与不同情况进行比较的值即可。因此，您设置了switch，然后将其与不同的值和$(this).data('value')进行比较。

我添加了一个hide/show选项以演示其工作原理。

此外，switch语句有一个Example情况，这是在没有其他情况条件通过时执行的情况。

在此处了解更多-> switch statement MDN

我还向显示/隐藏（default）的divs添加了一个公共类，因此更容易选择隐藏显示的内容。因此，您需要显示具有特定ID的div，然后隐藏其他ID。

编辑2

这是一个非常具体的问题。如果您不给我一些适用于您有“卖出”期权的这类情况的一般规则，我可以假设每次期权中的最后2个“单词”都是“旧”价格其次是“新”价格。

因此，下面所说的就是解决方法。

首先，我向该选项添加了一个类custom-content，它将具有这种类型的内容。

第二，检查sale（该选项）是否具有该类（“ sale”），然后将其作为Text并进行更改，然后再将其放入新的自定义选择中。请不要更改标准HTML选择的HTML。那是不允许的。

因此，首先我将选项文本用空格（''）分割，这将返回项目数组。对于销售选项，它将为['3'，'month'，'30 $'，'20 $']。然后，在选项的Text中替换与数组倒数第二个元素相同的项目。因此，在optiontext中，我将30 $替换为相同的元素30 $，但包裹在this标记内。

之后，您可以使用span

在CSS中设置样式

text-decoration: line-through

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");

  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        //  $(this).attr("class") will return undefined because this = option and options do not have class
        let optionText = $(this).text()
        if ( $(this).hasClass('sale') ) {
          const arr = optionText.split(' ');
          const newText = optionText.replace(arr[arr.length - 2],`<span class="strike">${arr[arr.length - 2]}</span>`)
          optionText = newText;
        }
       
       
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + optionText + '</span>';
      });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);

});

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").html($(this).html());
  
  //change 
   //if($(this).data("value") === "profile") {
    // $("#ic").show();
     //$("#passport").hide();
   //} else {
     //$("#ic").hide();
     //$("#passport").show();
   //}
   
    // in case of switch
    switch($(this).data("value")) {
      case 'profile':
       $("#ic").show();
       $(".custom-content:not(#ic)").hide()
      break;
      case 'example':
       $("#exampleId").show();
       $(".custom-content:not(#exampleId)").hide()
      break;
      default:
        $(".custom-content:not(#passport)").hide()
        $("#passport").show();
     }
    
});

$(".sources").on("change", function() {
	// this is not getting triggered
});

body {
  background: #ededed;
  font-family: 'Open Sans', sans-serif;
}
.center {
  position: absolute;
  display: inline-block;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/*#ic, #passport { display: none; }*/
.custom-content { display: none}

/** Custom Select **/
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}
  .custom-select-wrapper select {
    display: none;
  }
  .custom-select {
    position: relative;
    display: inline-block;
  }
    .custom-select-trigger {
      position: relative;
      display: block;
      width: 130px;
      padding: 0 84px 0 22px;
      font-size: 22px;
      font-weight: 300;
      color: #fff;
      line-height: 60px;
      background: #5c9cd8;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
    }
      .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
      }
      .custom-select.opened .custom-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
      }
  .custom-options {
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 100%;
    margin: 15px 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
  }
    .custom-options:before {
      position: absolute;
      display: block;
      content: '';
      bottom: 100%; right: 25px;
      width: 7px; height: 7px;
      margin-bottom: -4px;
      border-top: 1px solid #b5b5b5;
      border-left: 1px solid #b5b5b5;
      background: #fff;
      transform: rotate(45deg);
      transition: all .4s ease-in-out;
    }
    .option-hover:before {
      background: #f9f9f9;
    }
    .custom-option {
      position: relative;
      display: block;
      padding: 0 22px;
      border-bottom: 1px solid #b5b5b5;
      font-size: 18px;
      font-weight: 600;
      color: #b5b5b5;
      line-height: 47px;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
    .custom-option:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #f9f9f9;
    }
    
    .strike {
      text-decoration: line-through;
      }

最后，请确保将<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="center"> <select name="sources" id="sources" class="custom-select sources" placeholder="chose"> <option value="profile">Profile</option> <option value="example">Example</option> <option value="word">Word</option> <option class="sale" value="sale">3 month 30$ 25$</option> </select> </div> <div class="custom-content" id="ic">IC</div> <div class="custom-content" id="exampleId">Example</div> <div class="custom-content" id="passport">passport</div>从$(".custom-option").on("click", function() {更改为.find(".custom-select-trigger").text($(this).text());，因为我们也不会添加HTML（直行）

Answer 3

您正在创建自定义选择对象，以实现更好的可视化效果，请根据您的期望找到代码笔链接。

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
    id = $(this).attr("id"),
    name = $(this).attr("name");
  var template = '<div class="' + classes + '">';
  template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
  template += '<div class="custom-options">';
  $(this).find("option").each(function() {
    template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
  });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);

});

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click', function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select option:selected").val($(this).data("value"));
  console.log($(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")))
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  var sel = $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
  console.log($(sel).text())
  if ($(sel).text() == "Profile") {
    $("#ic").show();
    $("#passport").hide();
  } else {
    $("#ic").hide();
    $("#passport").show();
  }
});

.container {
  margin-top: 25px;
}

body {
  background: #ededed;
  font-family: 'Open Sans', sans-serif;
}

.center {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#ic,
#passport {
  display: none;
}


/** Custom Select **/

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}

.custom-select-wrapper select {
  display: none;
}

.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select-trigger {
  position: relative;
  display: block;
  width: 130px;
  padding: 0 84px 0 22px;
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 60px;
  background: #5c9cd8;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.custom-select-trigger:after {
  position: absolute;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  top: 50%;
  right: 25px;
  margin-top: -3px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all .4s ease-in-out;
  transform-origin: 50% 0;
}

.custom-select.opened .custom-select-trigger:after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  margin: 15px 0;
  border: 1px solid #b5b5b5;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .07);
  background: #fff;
  transition: all .4s ease-in-out;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-15px);
}

.custom-select.opened .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

.custom-options:before {
  position: absolute;
  display: block;
  content: '';
  bottom: 100%;
  right: 25px;
  width: 7px;
  height: 7px;
  margin-bottom: -4px;
  border-top: 1px solid #b5b5b5;
  border-left: 1px solid #b5b5b5;
  background: #fff;
  transform: rotate(45deg);
  transition: all .4s ease-in-out;
}

.option-hover:before {
  background: #f9f9f9;
}

.custom-option {
  position: relative;
  display: block;
  padding: 0 22px;
  border-bottom: 1px solid #b5b5b5;
  font-size: 18px;
  font-weight: 600;
  color: #b5b5b5;
  line-height: 47px;
  cursor: pointer;
  transition: all .4s ease-in-out;
}

.custom-option:first-of-type {
  border-radius: 4px 4px 0 0;
}

.custom-option:last-of-type {
  border-bottom: 0;
  border-radius: 0 0 4px 4px;
}

.custom-option:hover,
.custom-option.selection {
  background: #f9f9f9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" type="text/css" />

<div class="container">
  <div class="center">
    <select name="sources" id="sources" class="custom-select sources" placeholder="chose">
      <option value="profile">Profile</option>
      <option value="word">Word</option>
    </select>
  </div>
  <div id="ic">IC</div>
  <div id="passport">passport</div>
</div>