javascript - 変更中に異なる色変数を保存できません

Question

基本的に私がする必要があるのは、新しい色を追加してドロップダウンリストに保存することです。別のオプションが選択されている場合よりも、一致した色の名前で色の名前を表示する必要があります。すべてが機能しますが、ドロップダウン リストから新しいオプションを選択すると、色の名前を更新できません。

ここに私のHtmlコード：

<form id="form">
  <label for="name">Color name
    <input type="text" id="name" value="">
  </label>

  <label for="red">Red
    <input type="range" class="red" min="0" max="255" step="1" value="0" id="red" >
  </label>

  <label for="green">Green
    <input type="range" class="green" min="0" max="255" step="1" value="0" id="green">
  </label>

  <label for="blue">Blue
    <input type="range" class="blue" min="0" max="255" step="1" value="0" id="blue">
  </label>

  <label for="alpha">Alpha
    <input type="range" class="alpha" min="0" max="1" step="0.1" value="0" id="alpha">
  </label>

  <p>Rgba(0,0,0,0)</p> <input type="button" id="save" value="Save" />
</form>

<select id="listColors">
  <option value="">Choose your color</option>
</select>

<span></span>

そしてここにjavascript：

window.colorApp = {}; 

    colorApp.hex = function(event){
colorApp.newRgbColor = "Rgba("+colorApp.red.val()+", "+colorApp.green.val()+", "+colorApp.blue.val()+", "+colorApp.alpha.val()+")"; 
//document.body.style.backgroundColor = colorApp.newRgbColor;
$("p").html(colorApp.newRgbColor);
     };

            colorApp.addItem = function(event){
    $(colorApp.list).append('<option>' + colorApp.name.val() + colorApp.newRgbColor + '</option>');
    $(form).trigger("reset");
    $(name).focus();
    $("p").html('Rgba(0,0,0,0)');

  };


    colorApp.displaySelectedColor = function(event){
colorApp.listSelected = $("#listColors option:selected");
colorApp.selectedColorName = $(colorApp.listSelected).text();
$('span').html('<span style="color:'+ colorApp.newRgbColor + '">'+          colorApp.selectedColorName + '</span>');
    };


  $(document).ready(function() {
colorApp.form = $('#form');
colorApp.name = $('#name');
colorApp.red = $('#red');
colorApp.green = $('#green');
colorApp.blue = $('#blue');
colorApp.alpha = $('#alpha');
colorApp.list = $('#listColors');
colorApp.input = $('input');
colorApp.input.change(colorApp.hex);
colorApp.save = $('#save');
colorApp.save.click(colorApp.addItem);
colorApp.list.change(colorApp.displaySelectedColor);

   });

ライブのリンクはこちら: http://designbygio.it/colorPicker2/ どんな助けも大歓迎です!!