Question

我想拥有它，以便当我选择不是“选择”选项的项目时，项目的颜色会发生变化，标题“家居产品”文字也会改变颜色。

的jQuery

$(document).ready(function() {
     $('#item_options')
    .click(function(){
    $('#items_title').css('color', this.select ? '#000' : '#666');
    });
});

HTML

<div id="items_title">household products</div>
<select name="items" id="item_options">
   <option value="select">Select</option>         
   <option value="towel">towel</option>
   <option value="bed">bed</option>
   <option value="blanket">blanket</option>
</select>

Answer 1

HTML：

<div id="items">
    <span id="items_title">Household products:</span>
    <select name="items" id="item_options">
       <option value="select">Select</option>         
       <option value="towel">towel</option>
       <option value="bed">bed</option>
       <option value="blanket">blanket</option>
    </select>
</div>

CSS：

#items {
    color: gray;  
}

#item_options {
    color: inherit;
}

JavaScript的：

$( '#item_options' ).click( function () {
    $( this ).parent().css({ color: this.selectedIndex ? '#000' : '#666' });
});

现场演示： http://jsfiddle.net/HdPeY/3/

Answer 2

我认为你正在寻找类似的东西。

$('select').change(function() {
    var selected = $(this).find(':selected').val();
    if (selected == 2) {
        $('span').css({ color: 'red'});
    }
});

http://jsfiddle.net/t5kfQ/

Answer 3

尝试Change事件，而不是点击点击：

 $(document).ready(function () {
 $('#item_options')
.change(function () {
    if (this.value != "select") {
        $('#items_title').css('color', this.select ? '#000' : '#666');
    }
});
 });

如果我理解正确，当用户选择除选择值以外的值时，应该更改背景颜色。

Answer 4

使用change事件代替click事件并检查selectedIndex > 0。试试这个。

$(document).ready(function() {
    $('#item_options')
    .change(function(){
       $('#items_title').css('color', this.selectedIndex > 0 ? '#000' : '#666');
    }).change();
});

.click函数jQuery for option value下拉框

4 个答案: