HTML Idとオブジェクトのプロパティを一致させる

Question

私は、自転車とトラック、関連するプロパティ（車輪とウィンドウ）と入れ子オブジェクト前記特性の関連する値を含む。

選択した車両のIDを取得し、ネストされたオブジェクト内のオブジェクトと照合して適切なプロパティでフォームに入力する関数を記述します。

たとえば、リストから「van」を選択すると、「ホイール」に「2」、フォームに「1」が表示されます。

理想的には、この機能は、追加のビークルを含めるのに十分な柔軟性があります。

ご協力いただければ幸いです。ありがとうございました。

var bikeDetails = { 
 
    wheels: 2, 
 
    windows: 0 
 
}; 
 
var vanDetails = { 
 
    wheels: 4, 
 
    windows: 1 
 
}; 
 

 
var vehicles = { 
 
    bike: bikeDetails, 
 
    van: vanDetails 
 
};

<div id="classSelectWrapper"> 
 
    <form> 
 
    <select id="vehicleList"> 
 
     <option value="bike">bike</option> 
 
     <option value="van">van</option> 
 
    </select> 
 
    </form> 
 
</div> 
 

 

 
<div class="vehicleDetails"> 
 
    <form id="vehicleProps"> 
 
    <p> 
 
     <label for="wheels" value="">wheels:</label> 
 
     <input id="wheels" type="text" name="wheels" value="" disabled> 
 
    </p> 
 

 
    <p> 
 
     <label for="windows">windows:</label> 
 
     <input id="windows" type="text" name="windows" value="" disabled> 
 
    </p> 
 
    </form> 
 
</div>

Answer 1

スクリプトは次のようなものが考えられます。あなたの問題を解決するには、それはあなたを助けたことを願って、このように実装することができ

var select = document.getElementById('vehicleList'); 
select.addEventListener('change', function() { 
    var selected = this.selectedOptions[0].value, 
     wheels = document.getElementById('wheels'), 
     windows = document.getElementById('windows'); 

    wheels.value = vehicles[selected].wheels; 
    windows.value = vehicles[selected].windows; 
}); 

Answer 2

：

document.querySelector("#vehicleList").addEventListener("change", function(e) { 
    let value = e.target.options[e.target.selectedIndex].value; 
    if(value in vehicles) { 
    document.querySelector("#wheels").value = vehicles[value].wheels; 
    document.querySelector("#windows").value = vehicles[value].windows; 
    } 
});