0

Как реализовать выбор значения из списка по щелчку на картинку возле него?

Выбор значения по клику

5
  • у вас картинка и значение в однин блок обёрнуты? 25 июл 2017 в 19:35
  • 3
    Нужен html код, чтобы понимать иерархию блоков 25 июл 2017 в 19:35
  • Нет, картинка и значение в разных блоках
    – OlegB
    25 июл 2017 в 19:36
  • на чистом js нужно?
    – Cheg
    25 июл 2017 в 20:04
  • @OlegB Если ответ помог решить вашу проблему, вы можете отметить его принятым, нажав на галочку рядом с ним.
    – Cheg
    10 авг 2017 в 15:03

3 ответа 3

1

Добавьте каждому блоку с цветом атрибут, например, data-color и выводите его в нужное место при нажатии.

На чистом JS:

var block = document.getElementsByClassName('block'),
  output = document.getElementById('output');
for (var i = 0; i < block.length; i++) {
  block[i].onclick = function() {
    output.innerHTML = this.getAttribute('data-color'); // вставляем в output значение из data-color
  };
}
.block {
  float: left;
  width: 80px;
  margin: 10px;
}

.img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  background: #000;
}

.color {
  text-align: center;
}
<div>
  Выбранный цвет <span id="output"></span>
</div>
<br /><br /><br />
<div class="container">
  <div class="block" data-color="000">
    <div class="img"></div>
    <div class="color">000</div>
  </div>
  <div class="block" data-color="111">
    <div class="img"></div>
    <div class="color">111</div>
  </div>
  <div class="block" data-color="222">
    <div class="img"></div>
    <div class="color">222</div>
  </div>
  <div class="block" data-color="333">
    <div class="img"></div>
    <div class="color">333</div>
  </div>
  <div class="block" data-color="444">
    <div class="img"></div>
    <div class="color">444</div>
  </div>
  <div class="block" data-color="555">
    <div class="img"></div>
    <div class="color">555</div>
  </div>
  <div class="block" data-color="666">
    <div class="img"></div>
    <div class="color">666</div>
  </div>
</div>

1

Оборачиваешь картинку в div и даешь каждому свой id, и пишешь вот такую функцию:

$( "#id div'a с картинкой" ).click(function() {
  $("#id инпута").val("твое значение");
});
1
  • при чем тут jQuery?
    – Cheg
    25 июл 2017 в 19:42
1

var blocks = document.querySelectorAll('.color-sample');
for (var i = 0; i < blocks.length; i++) {
  // навешиваем клики на все цветные блоки
  blocks[i].addEventListener('click', function() {
    var color = this.getAttribute('data-color'); // выбранный цвет
    var options = document.querySelector('#colorSelection').querySelectorAll('option');
    for (var j = 0; j < options.length; j++) {
      if (options[j].value == color) {
        // ищем нужный option и выделяем его
        document.querySelector('#colorSelection').selectedIndex = j;
        break;
      }
    }
  });
}
.color-sample {
  width: 110px;
  float: left;
  cursor: pointer;
  text-align: center;
}

.color-sample .image {
  width: 100px;
  margin: 5px auto;
  overflow: hidden;
  height: 100px;
}

.color-sample[data-color="FDD"] .image {
  background: #FDD;
}

.color-sample[data-color="DFD"] .image {
  background: #DFD;
}

.color-sample[data-color="DDF"] .image {
  background: #DDF;
}
<select id="colorSelection">
<option value="FDD">FDD</option>
<option value="DFD">DFD</option>
<option value="DDF">DDF</option>
</select>
<div class="color-sample" data-color="FDD">
  <div class="image"></div>
  FDD
</div>
<div class="color-sample" data-color="DFD">
  <div class="image"></div>
  DFD
</div>
<div class="color-sample" data-color="DDF">
  <div class="image"></div>
  DDF
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.