<select> JavaScriptの要素を使用して特定の配列データを取得

Question

これに関連する質問は既にありますが、「<を使用して配列データを取得しています。>要素を使用しています。 は、例えば... 3つの配列

<script> 
 
function myCountry() { 
 
var country_1 = ["city1", "city2", "city3"]; 
 
var country_2 = ["city2_1", "city2_2","city3_3"]; 
 
var country_3 = ["city3_1", "city3_2" ,"city3_3"]; 
 
} 
 
</script>

今>要素を選択するHTML <を使用して

があります。

<select onchange="myCounty()"> 
 
<option>Country1</option> 
 
<option>Country2</option> 
 
<option>Country3</option> 
 
</select> 
 

 
<p id="demo"></p>

私が欲しい、特定の国が（例 'COUNTRY1' の）選択された場合は、配列1の都市（すなわちVAR COUNTRY_1 = [ "CITY1" .....]） id = demoの段落に表示する必要があります（例）

Answer 1

これはあなたを助けるでしょうか？

まず、select要素のIDを作成します。選択されている要素のインデックスを取得すると、配列の配列を作成し、対応するインデックスの配列にアクセスし、最後にカンマで出力します。

これで問題が解決した場合はお知らせください。属性の[値]

var country_1 = ["city1", "city2", "city3"]; 
 
var country_2 = ["city2_1", "city2_2", "city3_3"]; 
 
var country_3 = ["city3_1", "city3_2", "city3_3"]; 
 

 
function myCountry() { 
 
    var elem = document.getElementById("country"); 
 
    var options = [country_1, country_2, country_3]; 
 
    var index = elem.options[elem.selectedIndex].index; 
 
    var output = ""; 
 
    for(var k of options[index]){ 
 
    output += k + ", "; 
 
    } 
 
    document.getElementById("demo").innerHTML = output; 
 
} 
 
document.getElementById("country").addEventListener("change", myCountry); 
 
myCountry();

<select id="country"> 
 
<option>Country1</option> 
 
<option>Country2</option> 
 
<option>Country3</option> 
 
</select> 
 

 
<p id="demo"></p>

Answer 2

単純に配列を使用して、取得したいデータを取得することができます。

function myCountry(index) { 
 
    var country = [ 
 
     ["city1", "city2", "city3"], 
 
     ["city2_1", "city2_2","city3_3"], 
 
     ["city3_1", "city3_2" ,"city3_3"] 
 
    ] 
 
    
 
    return country[index]; 
 
} 
 

 
var p = document.querySelector('p'); 
 
var select = document.querySelector('select'); 
 

 
p.innerHTML = myCountry(0); 
 

 
select.addEventListener('change', function(e){ 
 
    p.innerHTML = myCountry(e.target.selectedIndex); 
 
});

<select> 
 
    <option>Country1</option> 
 
    <option>Country2</option> 
 
    <option>Country3</option> 
 
</select> 
 

 
<p></p>