需要相互依赖的按钮更改并使用jQuery选择CLICK功能。我需要将它们合并成文档吗？

Question

就整体功能而言，该脚本还不错，但是唯一的问题是，从选项或通过按钮进行选择时，选择选项值消失了（我相信#selectbox值未正确选择该值）。基本上，我需要等于.btn-itemlist和#selectbox值并同时移动它们两个。请记住，这些值是动态生成的，并且两个值的总数在加载时相同。我希望他们两个在document.ready上都相互依赖，并通过单击和选择保持不变。

$(document).ready(function() {
$('.btn-itemlist[value="0"]').click();

$(".btn-itemlist").click(function(e) {
   var _self = $(this),
   value = _self.val();
  $("#selectbox").val(value).trigger('change');
});

$('#selectbox').change(function(e) { 
   var _self = $(this),
   value = _self.val();
    $('.btn-itemlist[value="'+ value+'"]').click();
});

});

以前，我编写了以下脚本，并且仅当在#selectbox或.btn-itemlist click()中使用一个功能时，此脚本才能正常工作。简单地说，您可以说选择依赖于单击或单击选择，但两者都不是相互依赖的。当我将它们都与文档on.load一起使用时，仅执行第一部分（在本例中为.btn-itemlist），并且jQuery开始引发错误：

“未捕获的RangeError：超出最大调用堆栈大小”

并且每次单击或选择一个选项，此错误都会进一步增加。

$(".btn-itemlist").click(function() {
  q = ($(this).attr('value')),
  $("#selectbox").val(q).trigger('change');
});

$('#selectbox').change(function() 
{ 
val1 = $("#selectbox").val();
$('.btn-itemlist[value="'+ val1+'"]').click();
});

这里是JSFiddleJS Fiddle Demo