ddslick值undefined - 无法传递值

Question

只要ddslick发挥作用，我就无法将值从下拉菜单传递到addtocart（）函数。

  

    

我添加例如$（＆＃39;＃列表1＆＃39;）ddslick（）;）

  

它引发了一个未定义的＆＃34;数据错误。我将上面的行更改为

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

并在此提示警报中获取正确的输出，但仍无法传递该值。根据我的理解，addtocart（）函数的以下代码

＆＃13;

＆＃13;

document.getElementById('list1').value

＆＃13;

＆＃13;

＆＃13;

需要被

方向的东西取代

＆＃13;

＆＃13;

document.getElementById('list1').value

＆＃13;

＆＃13;

＆＃13;

我无法让它继续运行。

以下是完整的代码：

＆＃13;

＆＃13;

$('#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);
}

＆＃13;

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

＆＃13;

<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()">

＆＃13;

＆＃13;

＆＃13;

Answer 1

不确定您要实现的目标，但您可以从click函数内部调用addToCart函数。

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

function addToCart(item){
    CartJS.addItem(item,2);
}

或者如果用户需要从每个下拉列表中选择一个项目然后调用addToCart，可以将list1和list2的值保存在对象中并访问addToCart上的值：

var listState = {
    list1val: null,
    list2val: null
}

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

$('#list2').ddslick({
    showSelectedHTML: false,
    onSelected: function(data){
        listState.list2Val = data.selectedData.value,
    }   
});

function addToCart(item){
    var school = listState.list1Val;
    var item = listState.list2Val;
    console.log(listState);
}

Answer 2

这是您的固定代码

＆＃13;

＆＃13;

$('#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);
}

＆＃13;

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

＆＃13;

<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()">

＆＃13;

＆＃13;

＆＃13;