имитация работы select

313

26 декабря 2017, 18:43

$('.color-picker .block>label').click(function() { 
  var th = $(this); 
  $('.choise').replaceWith(th.addClass('to-choise')); 
  $('.color-picker .block').prepend(th); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<div class="color-picker"><span>Цвет:</span> 
  <form action=""> 
    <div class="choise"> 
      <label class="to-choise"> 
        <div class="box red"></div> 
        <div class="name">Красный</div> 
      </label> 
      <div class="block hidden"> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box red"></div> 
          <div class="name">Красный</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box orange"></div> 
          <div class="name">Оранжевый</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box yellow"></div> 
          <div class="name">Желтый</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box green"></div> 
          <div class="name">Зеленый</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box lblue"></div> 
          <div class="name">Голубой</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box blue"></div> 
          <div class="name">Синий</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box violet"></div> 
          <div class="name">Фиолетовый</div> 
        </label> 
      </div> 
    </div> 
  </form> 
</div>

В теории этот код должен заменять label class="to-choise" на выбранный label из .block, но получается все совсем не так, а именно:

Пропадает блок .block
Пропадает блок .choise
Вставляется label сразу после form

А как должно происходить:

Выбранный label из .block заменяется на label перед .block
Выбранный label из .block помещается в начало .block

В чем ошибка?

Answer 1

Заменил .choise на .to-choise (кажется вы изначально ошиблись с классом)
Добавил clone() в replaceWith (чтобы элемент оставался на месте, а вставляли клонируемый)
Для наглядности добавил удаление input из клонируемого объекта (чтобы не добавлялась радио-кнопка)
Добавил классу .to-choise красного цвета (чтобы было видно наглядно)
В HTML разметку добавил один <br> (чтобы отделить следующий блок)

$('.color-picker .block>label').click(function() { 
  var th = $(this); 
  var newElemnt = th.clone().addClass('to-choise');  
  newElemnt.children().remove('input'); 
  $('.to-choise').replaceWith(newElemnt); 
  $('.color-picker .block').prepend(th); 
});

.to-choise { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<div class="color-picker"><span>Цвет:</span> 
  <form action=""> 
    <div class="choise"> 
      <label class="to-choise"> 
        <div class="box red"></div> 
        <div class="name">Красный</div> 
      </label> 
      <br> 
      <div class="block hidden"> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box red"></div> 
          <div class="name">Красный</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box orange"></div> 
          <div class="name">Оранжевый</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box yellow"></div> 
          <div class="name">Желтый</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box green"></div> 
          <div class="name">Зеленый</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box lblue"></div> 
          <div class="name">Голубой</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box blue"></div> 
          <div class="name">Синий</div> 
        </label> 
        <label> 
          <input type="radio" name="pickColor"/> 
          <div class="box violet"></div> 
          <div class="name">Фиолетовый</div> 
        </label> 
      </div> 
    </div> 
  </form> 
</div>

Для ознакомления, ссылки на документацию по использованным методам (хотя из названий все должно быть ясно):