Question

我有一个问题，我需要一种更好看的方式来使用适合国家（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->

任何输入？

Answer 1

您可以使用JQuery和Array()来处理此类事情。只需将要显示的国家/地区放在var countries即阵列中即可。但是，制作包含数据库中所有国家/地区名称并从中调用它们的.cvs文件会更容易。无论如何，这个JQuery源可能对您的问题有帮助。

＆＃13;

$(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>");
	}
});

＆＃13;

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

＆＃13;

HTML - 使用选择选项的更简洁方法

1 个答案: