javascript - 動的ドロップダウン選択に ID を割り当てる方法は?

Question

最初の選択ドロップダウンが使用されるたびに、セッション ID (これは非表示になります) を割り当てたいと思います。セッション ID は、「日」の後の 300、301 などの数字です。

ユーザーが「優先」ドロップダウンから何かを選択すると、「300」値を「sessionid」ドロップダウンに割り当て、同時に「日」ドロップダウンの値を変更する必要があります（これはすでに機能しています）

どうすれば適切に実装できますか?

以下のコードを参照してください。

<select id="preferred" class="preferred" name="preferred">
  <option value="">- Select -</option>
  <option value="Mountain Dew">Mountain Dew</option>
  <option value="Seven Up">Seven Up</option>
</select>
<select id="day" class="day" name="day">
  <option value=""></option>
</select>
<select id="sessionid" class="sessionid" name="sessionid">
  <option value=""></option>
</select>

$(function() {
  var selectValues = {
   "Mountain Dew": {
   "Monday": "300"
  },
   "Seven Up": {
   "Tuesday": "301"
  }
};

var $preferred = $('select.preferred');
var $day = $('select.day');
var $sessionid = $('select.sessionid');

$preferred.change(function() {
  $day.empty().append(function() {
   var output = '';
   $.each(selectValues[$preferred.val()], function(key, value) {
   output += '<option value="' + key + '">' + key + '</option>';
  });
  return output;
  });
 }).change();
});

例: http://jsfiddle.net/creativemix/5ZWrE/2/