2016-11-15 13 views
1

getcountry()やsetcountry()などのように書かれた関数を持つjavascriptファイル(country.js)があります。getCountryにはすべての国のリストがあります。今私は、この機能を使用して、私のウェブページ上のコンボボックス内のすべての国を表示したいと考えています。しかし、私はhtmlセクションでこの関数を呼び出す方法はありません。htmlのselectタグでjavascript関数を呼び出しますか?

これはcountry.jsの一部が

------------------Country.js-------------------------- 
function _getCountries() { 

} 

function _setCountries() { 
    _countries.push({ CountryID: 1, Name: 'Germany' }); 
    _countries.push({ CountryID: 2, Name: 'India' }); 
    _countries.push({ CountryID: 3, Name: 'China' }); 
    ................................................. 
} 

を提出し、私はそのような何かをしようとしていますが、HTML部分には、この機能を使用する方法がわからないです。私はウェブ開発の新人です。

 -------------HTML-------------------------- 
     <div> 
    <select onchange="Country()"> 

    //what to do in this section? 
    </select> 
    </div> 

    ___________ javaScript__________________ 
    function Country{ 

      getCountries(); 
     //what to do in this section? 
      } 

答えて

1

_countriesは、すべてのオブジェクトを含む配列です。

グローバル変数に_countriesを作成し、

function _getCountries() { 
    return _countries; 
} 

var myDiv = document.getElementById("myDiv"); 
 

 
//Create array of options to be added 
 
var array = [{ CountryID: 1, Name: 'Germany' },{ CountryID: 2, Name: 'India' },{ CountryID: 3, Name: 'China' }]; 
 

 
//Create and append select list 
 
var selectList = document.createElement("select"); 
 
selectList.setAttribute("id", "mySelect"); 
 
myDiv.appendChild(selectList); 
 

 
//Create and append the options 
 
for (var i = 0; i < array.length; i++) { 
 
    var option = document.createElement("option"); 
 
    option.setAttribute("value", array[i]); 
 
    option.text = array[i].Name+"-"+array[i].CountryID; 
 
    selectList.appendChild(option); 
 
}
<div id="myDiv">Append here</div>

に使用
関連する問題