0

What basically i need to do is add new color, save it in a dropdown list and than when the different option are selected, i need to show the name of the color with the matched color name. 一切正常，但是当我从下拉列表中选择一个新选项时，我无法更新颜色名称。

这是我的 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/ 非常欢迎任何帮助！

4

1 回答 1

0

在您的 colorApp.addItem 函数中，您需要将值分配给添加的新选项，

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

  };

在您的 colorApp.displaySelectedColor 函数中，您需要将选项值的分配添加到您的 newRgbColor 变量

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

http://jsfiddle.net/EBJpn/1/

于 2013-10-18T08:24:36.700 回答