Set input attribute based on selected option

Question

I'm trying to set the value of a hidden input field based on the value of a selected option from a select box
This is what I've tried.

HTML

<select id="track_type_selected">
  <option value="0">51 Track 3m</option>
  <option value="1">64 Track 3m</option>
  <option value="2">103 Track 3m</option>
</select>
<input type="number" name="required_tracks_name" id="required_tracks_id" class="sku" sku="" disabled="">

Javascript

if ('#track_type_selected' == 1) {
    '#required_tracks_id'.sku('TRACK3');
}else if('#track_type_selected' == 2) {
    '#required_tracks_id'.sku('TRK30');
}else if ('#track_type_selected' == 3) {
    '#required_tracks_id'.sku('TRACK-1033');
}

When the option is selected I want to set the value of the SKU.

Answer 1

Before i go on with the solution, i can understand that you have basic to zero knowledge about JavaScript.. make sure you understand how JavaScript syntax works then continue.

To get the selected option use this code:

var e = document.getElementById("track_type_selected"); var selectedIndex = e.options[e.selectedIndex].value;

selectedIndex variable should now include the current selected index. (1,2,3.. etc)

So you can do this:
if(selectedIndex==1){/* some code */}

Now, to get sku attribute (since you confirmed that you use jquery) you can do this:
$("#required_tracks_id").attr("sku");

Make sure you check .attr usage and edit it to your needs.