Question

如您所见，这里有2个选择小部件，我在其中使用Select 2插件。

两个select小部件都使用相同的值列表（在我的情况下为categories）。如果用户选择在第一个窗口小部件中说Audi，那么我想在第二个窗口小部件中禁用该选项。怎么做？

var categories = ['BMW', 'Bentley', 'Audi', 'Aston Martin', 'Alfa Romeo'];

$("#first-widget").select2({
    data: categories,
    allowClear: false,
    minimumResultsForSearch: -1
});

$("#second-widget").select2({
    data: categories,
    allowClear: false,
    minimumResultsForSearch: -1
});

$('#first-widget').on('select2:select', function (e) {
    // Do something
});

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">

<div class="card mb-5">
  <div class="card-header">Сompare</div>
    <div class="card-body">
      <div class="form-row">
        <div class="col-md-6">
          <label for="first-widget">First widget</label>
          <select id="first-widget" class="form-control"></select>
        </div>
        <div class="col-md-6">
          <label for="second-widget">Second widget</label>
          <select id="second-widget" class="form-control"></select>
        </div>
       </div>
     </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

Answer 1

我认为您需要设置一个占位符，因为它对预选值没有意义，然后必须使用templateResult（）函数创建一个自定义属性，其中包含每个选项的值：

const data = [
  { message: "One", user: "Bob" },
  { message: "Two", user: "Bob" },
  { message: "Three", user: "Bob" },
  { message: "Hello", user: "Sam" },
  { message: "Hello", user: "Bob" },
  { message: "Hello", user: "Sam" },
  { message: "Hello", user: "Sam" }
];

const result = data.reduce((acc, value) => {
  // compare the current value with the last item in the collected array
  if (acc.length && acc[acc.length - 1][0].user == value.user) {
    // append the current value to it if it is matching
    acc[acc.length - 1].push(value);
  } else {
    // append a new array with only the current value at the end of the collected array
    acc.push([value]);
  }

  return acc;
}, []);
  
console.log(result);

您可以在此处签出：http://jsfiddle.net/u3tq89wg/

Answer 2

@Nurzhan Nogerbek，您可以这样做。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">

<div class="card mb-5">
  <div class="card-header">Сompare</div>
    <div class="card-body">
      <div class="form-row">
        <div class="col-md-6">
          <label for="first-widget">First widget</label>
          <select id="first-widget" class="form-control"></select>
        </div>
        <div class="col-md-6">
          <label for="second-widget">Second widget</label>
          <select id="second-widget" class="form-control"></select>
        </div>
       </div>
     </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script>
var categories = ['BMW', 'Bentley', 'Audi', 'Aston Martin', 'Alfa Romeo'];

$("#first-widget").select2({
    data: categories,
    allowClear: false,
    minimumResultsForSearch: -1
});

$("#second-widget").select2({
    data: categories,
    allowClear: false,
    minimumResultsForSearch: -1
});

$('#first-widget').on('change', function (e) {
// Do something
if($("#first-widget").val() == "Audi")
{
$("#second-widget>option[value='Audi']").prop('disabled',true);
$('select').select2();
}
else
{
 $("#second-widget>option[value='Audi']").prop('disabled',false);
 $('select').select2(); 
}
});
</script>
</body>
</html>

如何在Select2插件中禁用选项？

2 个答案: