Question

我有以下似乎不起作用的代码：

$('.chosen-select').on('change', function() {
    if ('.chosen-select'.value == '1') {
        $("#tips").html("the color that you want to add.");
    } else if ('.chosen-select'.value == '2') {
        $("#tips").html("the text that you want to add.");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tips"></div>
<select class="chosen-select" style="width:290px;" name="option">
    <option value="1">change background colour</option>
    <option value="2">insert text</option>
    <option value="3">insert arrow</option>
</select>

我的网络浏览器控制台没有给我任何错误。代码假设根据更改选择选项值来更改div的html。

Answer 1

这个'.chosen-select'.value不会起作用，因为它既不是有效的jQuery表达也不是JavaScript。而是使用$('.chosen-select').val()，this.value或$(this).val()。

<强> jsFiddle example

Answer 2

使用if($(this).val() == '1') {而不是if('.chosen-select'.value == '1')

＆＃13;

   $(function() {
  $('.chosen-select').on('change', function() {
    if($(this).val() == '1') {$("#tips").html( "the color that you want to add.");}
    else if($(this).val() == '2') {$("#tips").html( "the text that you want to add.");}
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tips"></div>
<select class="chosen-select" style="width:290px;" name="option">
<option value="1">change background colour</option>
<option value="2">insert text</option>
<option value="3">insert arrow</option>
</select>

＆＃13;

Answer 3

以下表达式不会产生您想要的结果：

'.chosen-select'.value

它尝试访问String对象的value属性，即undefined，因为字符串不具有此类属性。

在更改事件处理函数中，您可以充分利用this引用<select>元素的事实：

var selectedValue = this.value; // get value from select element

或者，使用jQuery的.val()函数来获取值：

var selectedValue = $(this).val();

选择更改jquery不工作

3 个答案: