javascript - 更改选择时，如果下拉列表中的项目具有相同的值，请选中复选框

Question

我正在从复选框中创建一个动态下拉列表。我想要的是当下拉列表更改时(选择时)我希望它检查具有相同值或可能具有相同名称的复选框？我也希望反之亦然，如果您选中复选框，选择下拉列表也应该改变。

这是我的代码笔 - http://codepen.io/BryanBarrera/pen/QEXVxY

我在写这篇文章时遇到问题。这是我所拥有的。对此最好的方法是什么？如何匹配元素来更改或选中复选框？

任何想法或建议将不胜感激

"use strict";

var checkBoxes = $('.form-item'),
    checkBox = $('input[type="checkbox"]'),
    $select = $('<select></select>').appendTo('body').wrap('<div class="select-dropdown"></div>');

checkBoxes.each(function (n) {
    var dataText = $(this).find('label').text();
    var dataValue = $(this).find('input').val();
    $select.append('<option value="' + dataValue + '">' + dataText + '</option>');
});


$select.on('change', function(){

  var checkboxvalue =  $(this).val();

  var a =  $(this).filter(function(){return this.value=='checkboxvalue'});

  console.log(a);
  console.log(checkboxvalue);

  if (checkboxvalue == $(this).val() ) {
   // alert('yup');
  }
});

Answer 1

这就能解决问题:

$select.on('change', function(){

  var checkboxvalue =  $(this).val();
  $('input[value='+checkboxvalue+']').prop('checked', true);

});

checkBox.on('change', function(){

  var selectValue =  $(this).val();
  $select.val(selectValue)

});

您可能需要一些其他函数来处理多项选择，因为您的下拉列表显然不支持像复选框这样的多项选择。

<小时/>

<强> Example