具有回调函数的图像下拉列表

Question

我的目标是实现包含图像的多个下拉字段，彼此位于彼此之下，并且每个字段都分配了一个JavaScript函数，我可以稍后通过按钮触发。粗略地说＆＃34;哦，这个和这个和这个被选中，按下按钮并触发所有选定的功能）。 ＆＃34;添加到购物车＆＃34; Cartjs.additem（）函数已经正常工作，只是不在此下拉环境中。当然，我觉得我已经超越了我的头脑。

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

＆＃13;

＆＃13;

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

＆＃13;

<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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我手头的问题是第二次添加的下拉列表不再正常工作。

我希望有人可以推动我朝着正确的方向前进，或者推荐一个更容易实施的解决方案。

更新

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这会停止下拉列表转发任何值，转发的值显示为＆＃34; undefined＆＃34;。现在它是一个或者。

这是整个代码。如果我添加$（＆＃39;＃list1＆＃39;），后两者不会提示值.ddslick（）;或$（＆＃39;＃list2＆＃39;）。ddslick（）;

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>