Question

我具有带有多个选项的select标记，因此当我通过使用其类名单击特定选项时，我希望警报框和值应该得到，但仅使用click事件，而不使用jQuery脚本中的onChange事件

$('.clk-option').on('click', function () {
  alert();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="value1">value1</option>
  <option class="clk-option" value="value2">value2</option>
</select>

Answer 1

您可以使用此：

<!DOCTYPE html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
    $(".clk-option").click(function(){
        alert("The button was clicked.");
    });
});
</script>
</head>
<body>
<select>
  <option value="value1">value1</option>
  <option class="clk-option" value="value2">value2</option>
</select>
</body>

来源：

https://www.w3schools.com/jquery/event_click.asp

Answer 2

要获取值，可以使用jQuery attr()方法，请检查下一个示例。

$('.clk-option').on('click', function ()
{
    var value = $(this).attr("value");
    alert("Value of the option is: " + value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="value1">value1</option>
  <option class="clk-option" value="value2">value2</option>
</select>

对于大于或等于 1.6 的JQuery版本，您也可以使用prop()方法：

$('.clk-option').on('click', function ()
{
    var value = $(this).prop("value");
    alert("Value of the option is: " + value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="value1">value1</option>
  <option class="clk-option" value="value2">value2</option>
</select>

Answer 3

您在这里找到解决方法

$('select').on('change', function () {
  //console.log($(this).val(), $('select option:selected').attr('class'));
  if ($('select option:selected').attr('class') === "clk-option") {
    // ---- put your conditional code here
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="value1">value1</option>
  <option class="clk-option" value="value2">value2</option>
</select>

希望这会对您有所帮助。

使用jQuery方法单击选择标记中的选项时如何获得警报和价值

3 个答案: