выберите вариант из выпадающего списка при нажатии на другой элемент

Question

Я пытаюсь создать цветовую палитру на основе цветов, указанных в раскрывающемся списке с кодом ниже (jsfiddle here)

HTML:

<select id="colour" name="colour"> 
     <option value="000000">Black</option> 
     <option value="CCCCCC">Grey</option> 
     <option value="EAEAEA">Light Grey</option> 
</select> 

JS:

$(function() { 
     var $colourcontainer = '<div id="colour-palette"></div>'; 
     $('#colour').after($colourcontainer); 

     $('#colour option').each(function() { 
      $val = $(this).val(); 
      if($val) { 
       $('#colour-palette').append('<div class="colour" style="background-color:#'+$val+';"></div>').click(function() { 
        $('#colour:last').val($val); 
        alert($val); 
       }); 
      } 
     }); 
    }); 

проблема у меня становлюсь его цикл только один раз для каждого варианта раскрывающегося прямо сейчас петли несколько раз и добавляет несколько onclicks к каждому со хмуриться.

Answer 1

Он добавляет несколько кликов, потому что вы привязываете обработчик кликов к #colour-palette на каждой итерации (здесь 3 итерации).

Лучше было бы создать .colour элемент добавить цвет как свойство данных, а затем использовать на обработчик щелчка, чтобы назначить событие щелчка #colour-palette для .color элемента к Попробуйте это:

$(function() { 
    var $colourcontainer = '<div id="colour-palette"></div>'; 
    $('#colour').after($colourcontainer); 

    $('#colour option').each(function() { 
     $val = $(this).val(); 
     if ($val) { 
      var colorEl = $('<div class="colour" style="background-color:#' + $val + ';"></div>'); 
      colorEl.data("bgColor", $val) 
      $('#colour-palette').append(colorEl); 
     } 
    }); 
    $('#colour-palette').on("click", ".colour", function() { 
     $('#colour').val($(this).data("bgColor")); 
    }); 
});​ 

Working JSFiddle:http://jsfiddle.net/Rf9L3/1/