代码之家 › 专栏 › 技术社区 › michaelmcgurk

从下拉列表中选择项目时向用户发出警报

jquery javascript

michaelmcgurk · 技术社区 · 7 年前

是否可以在用户选择值时向其发出警报 Mustard

$('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>

6 回复 | 直到 7 年前

Mamun 7 年前

尝试 $(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>

Sumesh TG 7 年前

$('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 当找不到匹配项时。

Andrey 7 年前

如果需要检查 Mustard

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

Kashyap 7 年前

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

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

Rohith K P 7 年前

还有一个事件由引导程序select公开, changed.bs.select .

另外,或者使用类( class="selectpicker" )或javascript( $('select').selectpicker(); )初始化选择。

请参阅fiddle=> 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>

MahalingaM SubramaniyaM 7 年前

针对单选和多选下拉事件给出了两种解决方案,以检查是否选中了“芥末”。

    $('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>