。點擊功能jQuery的選項值下拉框

我想要它，以便當我選擇一個不是「選擇」選項的項目時，項目的顏色會改變，標題「家居產品」文本顏色將更改爲好。。點擊功能jQuery的選項值下拉框

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>

來源

2012-02-03 noWayhome

只是爲了澄清，您希望選項的顏色隨其顯示在下拉列表中而改變？ – kinakuta 2012-02-03 23:18:21

是和標題。謝謝 – noWayhome 2012-02-03 23:19:18

當你說我希望擁有它，以便當我選擇一個不是「選擇」選項的項目時，項目的顏色會發生變化，而其他一些文本會發生變化._您的意思是，當用戶更改你想要CSS /文本改變的選擇框？ – jasonmerino 2012-02-03 23:21:21

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/

來源

2012-02-03 23:34:28

沒有任何反應，當我改變方框 – noWayhome 2012-02-03 23:36:16

@noWayhome如果選擇「選擇」選項，標題顏色是灰色，如果選擇了其他選項，則標題顏色爲黑色。你不想要那個？ – 2012-02-03 23:38:31

如果您選擇毛巾和毛巾顏色從黑色變爲灰色，沒有關係。 – noWayhome 2012-02-03 23:38:38

嘗試Change事件，而不是在點擊這樣的：

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

如果我理解正確這應該改變背景色當用戶選擇的值不是選擇值而是選擇的值。

來源

2012-02-03 23:24:45 Wahtever

不適用於我。你是否得到它的工作？你能告訴我一個小提琴 – noWayhome 2012-02-03 23:28:59

檢查這個小提琴http://jsfiddle.net/w9W9P/ – Wahtever 2012-02-03 23:35:21

我認爲你正在尋找這樣的東西。

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

http://jsfiddle.net/t5kfQ/

來源

2012-02-03 23:32:53 Trevor

，看起來不錯，謝謝 – noWayhome 2012-02-03 23:35:14

使用change事件，而不是click事件和檢查selectedIndex > 0。嘗試這個。

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

來源

2012-02-03 23:36:47 ShankarSangoli

@noWayHome - 看看這個http://jsfiddle.net/guSWd/ – ShankarSangoli 2012-02-03 23:38:50

你想爲每個選項使用不同的顏色嗎？ – ShankarSangoli 2012-02-03 23:40:49

。點擊功能jQuery的選項值下拉框

回答

相關問題