从下拉菜单中选择项目时提醒用户

Question

当用户从下拉列表中选择值Mustard时是否可以提醒用户？我尝试在控制台出现“ hello”但没有成功时将其写入。

演示： http://jsfiddle.net/exq19fdj/

代码：

$('select').selectpicker();

$("select").change(function(e) {
  if ($(this).is(':checked')) {
    console.log('hello!');
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
</select>

Answer 1

尝试$(this).val() == "Mustard"

$('select').selectpicker();

$("select").change(function(e) {
  if ($(this).val() == "Mustard") {
    console.log('hello!');
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
</select>

Answer 2

$('select').selectpicker();

$("select").change(function(e) {
 if( $(this).find("option:selected").text().indexOf("Mustard")!=-1){
 console.log("helo");
 }

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
</select>

尝试一下。您可以使用indexOf函数简单地检查所选项目中是否存在“芥末酱”。如果找不到匹配项，它将返回-1。

Answer 3

对于多选，如果您需要检查是否选择了Mustard-您需要搜索所选值的数组。 （因为可以选择多个值）

$("select").change(function(e) {
    if ($(this).val().indexOf('Mustard') !== -1)
        alert('MUSTARD!');
    }
});

Answer 4

$("select").change(function(e) {
   if($(this).selectpicker('val').includes('Mustard')){
       alert('Mustard selected');
   }
});

您可以使用selectpicker方法来检索选定的值。

Answer 5

引导选择changed.bs.select也暴露了一个事件。

也可以使用class（class="selectpicker"）或javascript（$('select').selectpicker();）来初始化选择。

请参阅小提琴=> http://jsfiddle.net/Rohith_KP/8o0pcb6r/

$('select').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue, x) {
  if ($(this).val() == "Mustard") {
    console.log('hello!');
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
</select>

Answer 6

我为单选和多选下拉事件提供了两种解决方案，以检查是否选择了“芥末酱”。

    $('select').selectpicker();
    $("select").change(function (e) {
        if ($(this).val().indexOf("Mustard") == 0) {
            alert('hello!');
        }
        //or
        if ($(this).val().toString() == "Mustard") {
            alert('hello!');
        }
        else if ($(this).val() != "") {
            var multiSelect = $(this).val().toString().split(',');
            for (var i = 0; i < multiSelect.length; i++) {
                if (multiSelect[i] == "Mustard") {
                    alert('hello!');
                }
            }
        }

    });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" multiple data-live-search="true">
    <option value="Mustard">Mustard</option>
    <option value="Ketchup">Ketchup</option>
    <option value="Relish">Relish</option>
</select>