jQuery移動自定義選擇菜單與不同風格的選項

Question

是否有可能在jquery移動自定義選擇菜單中設置不同的選項（http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom html的）？

我的項目需要不同顏色的不同選項的背景。我一直在尋找一段時間，並沒有遇到一個解決方案。

感謝您的任何幫助。

Answer 1

以下是我解決了這個。

這是我的選擇菜單：

<select data-inline="true" data-native-menu="false" data-theme="d" data-val="true" data-val-number="The field DropletId must be a number." data-val-required="The DropletId field is required." id="Droplet" name="Plan.DropletId" style="margin-right:0px;"> 
    <option value="1">Ultra Coarse (UC)</option> 
    <option value="2">Extra Coarse (XC)</option> 
    <option selected="selected" value="3">Very Coarse (VC)</option> 
    <option value="4">Coarse (C)</option> 
    <option value="5">Medium (M)</option> 
    <option value="6">Fine (F)</option> 
    <option value="7">Very Fine (VF)</option> 
    <option value="8">Extra Fine (XF)</option> 
    </select> 

CSS：

#Droplet-menu li:nth-child(1) > div{background-color:Red; } 
    #Droplet-menu li:nth-child(1) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px} 

    #Droplet-menu li:nth-child(2) > div{background-color:Blue;} 
    #Droplet-menu li:nth-child(2) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px} 

    #Droplet-menu li:nth-child(3) > div{background-color:Green;} 
    #Droplet-menu li:nth-child(3) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px} 

    #Droplet-menu li:nth-child(4) > div{background-color:Yellow;} 
    #Droplet-menu li:nth-child(4) > div > div > a {color: #333333 !important;} 

    #Droplet-menu li:nth-child(5) > div{ background-color:Black;} 
    #Droplet-menu li:nth-child(5) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px} 

    #Droplet-menu li:nth-child(6) > div{background-color: Fuchsia;} 
    #Droplet-menu li:nth-child(6) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px} 

    #Droplet-menu li:nth-child(7) > div{background-color:Aqua;} 
    #Droplet-menu li:nth-child(7) > div > div > a {color: #333333 !important;} 

    #Droplet-menu li:nth-child(8) > div{background-color:Olive;} 
    #Droplet-menu li:nth-child(8) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px} 

雖然這增加不同風格的jQuery Mobile的定製選擇，所選項目後選擇失去了所需要的風格。

所以，更多的CSS：

.droplet1 {background-color:Red; color: White; text-shadow: #3373A5 0px 1px 1px;} 
    .droplet2 {background-color:Blue; color: White; text-shadow: #3373A5 0px 1px 1px;} 
    .droplet3 { background-color:Green; color: White; text-shadow: #3373A5 0px 1px 1px;} 
    .droplet4 { background-color:Yellow; color: Black;} 
    .droplet5 { background-color:Black; color: White; text-shadow: #3373A5 0px 1px 1px;} 
    .droplet6 { background-color: Fuchsia; color: White; text-shadow: #3373A5 0px 1px 1px} 
    .droplet7 {background-color:Aqua; color: Black;} 
    .droplet8 { background-color:Olive; color: White; text-shadow: #3373A5 0px 1px 1px;} 

...和一個小的jQuery：

var prevClass = ""; 

    $(document).ready(function() { 
    var selDroplet = $("#Droplet option:selected").attr('value'); 
    var dropletCssClass = "droplet" + selDroplet; 
    $('#Droplet-button span:nth-of-type(1)').addClass(dropletCssClass); 
    }); 

    $("#Droplet").change(function() { 
    var str = ""; 

    $("#Droplet option:selected").each(function() { 
    str = "droplet" + $(this).attr('value'); 

    $("#SelectedDroplet").val($(this).attr('value')); 
    $('#Droplet-button span:nth-of-type(1)').removeClass(prevClass); 
    $('#Droplet-button span:nth-of-type(1)').addClass(str); 
    prevClass = str; 
    }); 


}) 
.change(); 

此代碼已經過測試，在兩個iPad和三星Galaxy平板電腦10.1工作。

演示：http://jsfiddle.net/Debarupa/7TsVM/

希望它會幫助別人。

感謝Aurelio De Rosa指引我走向正確的方向。

Answer 2

該方法總是相同的，那就是使用nth-child選擇器來選擇您想要的<li>（然後在其內部更改<div>）。您可以將它與CSS3（更好）或jQuery一起使用。您必須將nth-child與元素ul.ui-listview的孩子結合使用。事情是這樣的：

ul.ui-listview > li:nth-child(2n) > div {background-color: green} 
ul.ui-listview > li:nth-child(2n+1) > div {background-color: red} 

或使用jQuery：

$('ul.ui-listview > li:nth-child(2n) > div').css('background-color', 'green'); 
$('ul.ui-listview > li:nth-child(2n+1) > div').css('background-color', 'red'); 

Answer 3

在jQuery Mobile的1.4.5產生結構改變了一點點，所以你必須改變CSS以下辦法讓它工作：

#Droplet-menu li:nth-child(1) .ui-btn {background-color:Red; } 
#Droplet-menu li:nth-child(1) .ui-btn {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px} 

#Droplet-menu li:nth-child(2) .ui-btn {background-color:Blue;} 
#Droplet-menu li:nth-child(2) .ui-btn {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px} 
...