2个选定的Select2之间的相互作用

Question

我从MySQL收到了两个Select2的数据。

<div class="input-group input-group-sm mb-3 kod_gecis">  
  <select name="p_code" id="p_code" class="form-control kod_ara">
<?php
foreach ($result4 as $row3) {
  echo '<option data-pname="' . $row3['ProductName'] . '" value="' . $row3['ProductCode'] . '">'
    . $row3['ProductCode']
    . '</option>';
}
?>
  </select>
</div>
<div class="input-group input-group-sm mb-3 border border-warning gecis">
  <select name="p_name" id="p_name" class="form-control urun_ara">
<?php
foreach ($result2 as $row) {
  echo '<option data-pcode="' . $row['ProductCode'] . '" data-inbox="' . $row['PiecesInBox'] . '" data-price="' . $row['Price'] . '" name="' . $row['ProductName'] . '" value="' . $row['ProductName'] . '">'
    . $row['ProductName']
    . '</option>';
}
?>
  </select>
</div>

当我尝试选择p_name时，它将更改p_code select2很好。
但是问题是次要的。我会更改为p_name，而根据p_code的选定值。
这可能是这样的工作：
从p_code data-pname的选择值接收值，之后，它应该等于p_name p_name 更改功能。
这些代码都在文档就绪功能下工作。

$('#p_name').change(function() {
  var pcode = $('#p_name option:selected').data('pcode');
  $('#p_code').val(pcode).trigger("change");
});
$('#p_code').change(function() {
  var pname = $('#p_code option:selected').data('pname');
  $('#p_name').val(pname).trigger("change"); // it's not working
  $('#p_name').select2('');
});

Answer 1

我解决了问题。我将分享谁需要在2个选定的Select2之间使用互动。

您应该使用第一个功能

更改功能

这样的

$('#p_name').change(function(){
    var pcode = $('#p_name option:selected').data('pcode');
    $('#p_code').val(pcode).trigger("change");
    });

：对于次要，您应该使用

'select2：选择'

函数，以便根据数据属性从数据中获取第一个Select2选择值，然后立即选择您的次要选择值。

工作代码在下面（适用于辅助选择2）：

$('#p_code').on('select2:select', function () {
    var data = $('#p_code option:selected').data('pname');
$('#p_name').val(data).trigger('change');
});