javascript - 带有回调函数的图像下拉列表

Question

我的目标是实现包含图像的多个下拉字段，它们位于彼此下方，并且每个下拉字段都分配有一个 JavaScript 函数，我可以稍后通过按钮触发。大致说“哦，这个和这个和这个被选中，按下按钮并触发所有选定的功能”。“添加到购物车”Cartjs.additem() 功能已经正常工作，只是不在这个下拉环境中.当然，我觉得我有点不知所措。

到目前为止，这是我的代码:

$('#options').ddslick();

<style class="cp-pen-styles">*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.grid__spans-25 {
  width: 100%;
  padding: 1em;
}
@media screen and (min-width: 48em) {
  .grid__spans-25 {
    width: 25%;
  }
}

#options,
.dd-select,
.dd-options {
  width: 100% !important;
}

.dd-selected-text,
.dd-option-text {
  line-height: 64px !important;
}

.dd-select {
  background: #fff !important;
  border-color: #d1d3d4 !important;
  border-radius: 0 !important;
}

.dd-selected {
  font-weight: normal !important;
}

label {
  display: block;
}

input[type="text"], input[type="name"], input[type="email"], input[type="tel"], input[type="password"], select {
  background: transparent;
  width: 100%;
  height: 42px;
  padding: 10px;
  display: block;
  border: 1px solid #d1d3d4;
  border-radius: 0;
  outline: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

<section class="grid">
  
  <div>
    <label for="options">Label</label>
    <select id="options" class="test">
      <option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
      <option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
      <option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
      <option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
      <option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
    </select>
  </div>
  
</section>

 <section>
  
  <div class="grid__spans-25">
    <label for="options">Label</label>
    <select id="options" class="test">
      <option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
      <option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
      <option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
      <option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
      <option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
    </select>
  </div>
  
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>

我手头的问题是第二个添加的下拉菜单不再正常工作。

我希望有人能将我推向正确的方向或推荐更易于实现的解决方案。

更新

我能够让下拉选择和按钮触发器正常工作。我现在遇到的问题是，为了将图片添加到下拉列表中，我需要包含以下功能:

$('#options').ddslick();

虽然这会阻止下拉列表转发任何值，但转发的值显示为“未定义”。现在是非此即彼。

这是完整的代码。如果我添加 $('#list1').ddslick(); 后两者不会提示值或 $('#list2').ddslick();

<ul class="flex-container">
  <li class="flex-item">
    <section class="grid__spans-25">
  
  <div >
    <label for="options">Label</label>
    <select id="options" class="test">
      <option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
      <option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
      <option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
      <option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
      <option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
    </select>
  </div>
  
</section>
  </li>
  <li class="flex-item">
     <section class="grid__spans-25">
  <select id="list1">
   <option value="9107763265579">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
</select>
  
</section>
  </li>
  
    <li class="flex-item">
     <section class="grid__spans-25">
       <select id="list2">
   <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
</select>
  
</section>
  </li>
  
</ul>

<input type="button" value="Add to Cart" onclick="addToCart()">

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>
<script >

$('#options').ddslick();

</script>

<script>

function addToCart(){
	var school = document.getElementById('list1').value
  var item = document.getElementById('list2').value
  alert('school: '+school+' item: '+item)
}
</script>

Answer 1

您必须为每个实例分配不同的 ID。

$('#options').ddslick();
$('#options2').ddslick();

<style class="cp-pen-styles">*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.grid__spans-25 {
  width: 100%;
  padding: 1em;
}
@media screen and (min-width: 48em) {
  .grid__spans-25 {
    width: 25%;
  }
}

#options,
.dd-select,
.dd-options {
  width: 100% !important;
}

.dd-selected-text,
.dd-option-text {
  line-height: 64px !important;
}

.dd-select {
  background: #fff !important;
  border-color: #d1d3d4 !important;
  border-radius: 0 !important;
}

.dd-selected {
  font-weight: normal !important;
}

label {
  display: block;
}

input[type="text"], input[type="name"], input[type="email"], input[type="tel"], input[type="password"], select {
  background: transparent;
  width: 100%;
  height: 42px;
  padding: 10px;
  display: block;
  border: 1px solid #d1d3d4;
  border-radius: 0;
  outline: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

<section class="grid">
  
  <div>
    <label for="options">Label</label>
    <select id="options" class="test">
      <option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
      <option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
      <option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
      <option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
      <option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
    </select>
  </div>
  
</section>

 <section>
  
  <div class="grid__spans-25">
    <label for="options2">Label</label>
    <select id="options2" class="test">
      <option value="1" data-imagesrc="http://placehold.it/64x64">Option 1</option>
      <option value="2" data-imagesrc="http://placehold.it/64x64">Option 2</option>
      <option value="3" data-imagesrc="http://placehold.it/64x64">Option 3</option>
      <option value="4" data-imagesrc="http://placehold.it/64x64">Option 4</option>
      <option value="5" data-imagesrc="http://placehold.it/64x64">Option 5</option>
    </select>
  </div>
  
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>
</script><script src='https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js'></script>