我有一个问题，我需要一种更好看的方式来使用迎合国家（240+ 国家/地区）的选择选项。我计划使用select2来增强搜索体验。现在，一个包含一些值的常规选择选项将如下所示
<select>
<option value=..></option>
<select>
但是在选择国籍的情况下，有240 +国家，突然间像这样的一段不错的代码看起来很糟糕。
<div class="form-group">
<label for="alias" class="col-sm-2 control-label">Alias</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="alias" placeholder="Employee alias">
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">DoB</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="dob" placeholder="Date of birth">
</div>
</div>
<! 240++ lines worth of options->
任何输入？
你可以
以某种方式使用JQuery和Array()来处理这类事情。只需将您想要显示的国家/地区放在数组var countries即可。但是制作数据库中包含所有国家/地区名称的 .cvs 文件并从中调用它们会更容易。无论如何，这个JQuery来源可能会对您的问题有所帮助。
$(document).ready(function(){
var countries = new Array();
/* here you put all the countries you want in array */
countries = ["Korea", "USA", "China", "India", "etc"];
for(i = 0;i < countries.length;i++) {
$("#select2").append("<option value='"+countries[i]+"'>"+countries[i]+"</option>");
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>test</title>
</head>
<div class="form-group">
<label for="alias" class="col-sm-2 control-label">Alias</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="alias" placeholder="Employee alias">
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">DoB</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="dob" placeholder="Date of birth">
</div>
</div>
<!-- 240++ lines worth of options -->
<div class="form-group">
<label for="select2" class="col-sm-2 control-label">Select Country</label>
<div class="col-sm-10">
<!-- this is where countries enters -->
<select name="" id="select2">
</select>
</div>
</div>
</body>
</html>