Question

我正在从复选框中创建动态下拉列表。我想要的是当下拉列表发生变化时（在选择时）我希望它检查具有相同值的复选框，或者可能使用相同的name复选框？我也希望它反之亦然，如果你check一个复选框，选择下拉列表也应该改变。

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

我写这个问题。这就是我所拥有的。对此最好的方法是什么？如何匹配元素以更改或检查checkboxes？

任何想法或建议都会得到很多赞赏

"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

Answer 2

您正在设置复选框元素的值，但实际上并未选中该复选框。你还需要这样做：

$('#checkbox-selector').prop('checked', true);

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

2 个答案: