javascript - ddslick 值未定义 - 无法传递值

Question

一旦 ddslick 发挥作用，我就无法将值从下拉菜单传递到 addtocart() 函数。

As soon as I add e.g. $('#list1').ddslick();)

它抛出一个“未定义”的数据错误。我将上面的行更改为

$('#list1').ddslick({
    showSelectedHTML: false,
    onSelected: function(data){
        alert(data.selectedData.value);
    }   
});

并在此提示的警报中获得正确的输出，但仍然无法传递该值。以我的理解，addtocart()函数的如下代码

document.getElementById('list1').value

需要用方向上的东西代替

document.getElementById('list1').value

虽然我无法让它运行。

完整代码如下:

$('#list1').ddslick();
$('#list2').ddslick();


function addToCart() {
  var school = document.getElementById('list1').value
  var item = document.getElementById('list2').value
  alert('school: ' + school + ' item: ' + item)
  CartJS.addItem(school, 2);
}

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

@import "compass/css3";
.flex-container {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  float: left;
}

.flex-item {
  padding: 5px;
  width: 500px;
  margin-top: 10px;
  text-align: center;
}

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

<script src="https://ajax.googleapis.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>

<ul class="flex-container">

  <li class="flex-item">
    <section class="grid__spans-25">
      <select id="list1">
       <option value="9107763265579" data-imagesrc="http://placehold.it/64x64">item 1</option>
        <option value="2" data-imagesrc="http://placehold.it/64x64">item 2</option>
        <option value="3" data-imagesrc="http://placehold.it/64x64">item 3</option>
    </select>

    </section>
  </li>

  <li class="flex-item">
    <section class="grid__spans-25">
      <select id="list2">
       <option value="1" data-imagesrc="http://placehold.it/64x64">item 1</option>
        <option value="2" data-imagesrc="http://placehold.it/64x64">item 2</option>
        <option value="3" data-imagesrc="http://placehold.it/64x64">item 3</option>
    </select>

    </section>
  </li>

</ul>

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

Answer 1

这是你的固定代码

$('#list1').ddslick();
$('#list2').ddslick();


function addToCart() {
//      var school = document.getElementById('list1').value
//      var item = document.getElementById('list2').value

  var list1Selection = $('#list1').data('ddslick').selectedData;
  var school = list1Selection.value + " / " + list1Selection.text 
  

  var list2Selection = $('#list2').data('ddslick').selectedData;
  var item = list2Selection.value + " / " + list2Selection.text 

  alert('school: [' + school + '] item: [' + item + ']')
  // CartJS.addItem(school, 2);
}

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

@import "compass/css3";
.flex-container {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  float: left;
}

.flex-item {
  padding: 5px;
  width: 500px;
  margin-top: 10px;
  text-align: center;
}

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

<script src="https://ajax.googleapis.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>

<ul class="flex-container">

  <li class="flex-item">
    <section class="grid__spans-25">
      <select id="list1">
       <option value="9107763265579" data-imagesrc="http://placehold.it/64x64">item 1</option>
        <option value="2" data-imagesrc="http://placehold.it/64x64">item 2</option>
        <option value="3" data-imagesrc="http://placehold.it/64x64">item 3</option>
    </select>

    </section>
  </li>

  <li class="flex-item">
    <section class="grid__spans-25">
      <select id="list2">
       <option value="1" data-imagesrc="http://placehold.it/64x64">item 1</option>
        <option value="2" data-imagesrc="http://placehold.it/64x64">item 2</option>
        <option value="3" data-imagesrc="http://placehold.it/64x64">item 3</option>
    </select>

    </section>
  </li>

</ul>

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