HTML - セレクトオプションを使用するより洗練された方法

私は、国（240カ国以上）に対応する選択肢オプションを使用するには、より見栄えのよい方法が必要となる問題があります。私はselect2を使用して検索の経験を強化する予定です。さて、その中のいくつかの値との定期的な選択 - オプションは、ちょうどこのHTML - セレクトオプションを使用するより洗練された方法

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

入力はありますか？

出典

2016-07-12 Kei

。次に、1つのループだけを使ってすべてのデータをフェッチしますか？ – Rohit

特定の質問がありますか？ –

多分この種のものにはJQueryとArray()を使用できます。表示したい国を配列のvar countriesに入れてください。しかし、データベース上のすべての国名を持つ.cvsファイルを作成し、そこから呼び出すほうが簡単になります。とにかくこのJQueryのソースがあなたの質問に役立つかもしれません。あなたはJSONファイルまたはXMLやDBに国の詳細情報を格納していないのはなぜ

$(document).ready(function(){ 
 
\t var countries = new Array(); 
 
\t /* here you put all the countries you want in array */ 
 
\t countries = ["Korea", "USA", "China", "India", "etc"]; 
 
\t 
 
\t for(i = 0;i < countries.length;i++) { 
 
\t \t $("#select2").append("<option value='"+countries[i]+"'>"+countries[i]+"</option>"); 
 
\t } 
 
});

<!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"> 
 
    \t <!-- this is where countries enters --> 
 
    \t <select name="" id="select2"> 
 
    \t </select> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

出典

2016-07-12 06:01:04

HTML - セレクトオプションを使用するより洗練された方法

答えて

関連する問題