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>

当我尝试 select p_name 时，它会很好地改变 p_code select2。
但问题是第二个。根据 p_code.
的 selected 值，我将更改为 p_name 这可能是这样工作的：
从 p_code selected 值 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 selected select2.

之间的交互

你应该为第一个函数做

change function

像这样：

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

对于中学，你应该使用

'select2:select'

函数，以便根据您的数据属性从数据中获取您的第一个 select2 selected 值，并立即 select 您的第二个 selected 值。

工作代码如下（对于二级select2）：

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

2个选中的select2之间的交互

Interaction between 2 selected select2

jquery

jquery-select2

onchange