0

我需要更改选项值中图像的文本。我的html代码是这样的：

<select id="topics" class="taxonomies-filter-widget-input" name="topics">
<option value="0">Todas</option>
<option class="level-0" value="unaestrella">Una Estrella</option>
<option class="level-0" value="dosestrellas">Dos Estrellas</option>
<option class="level-0" value="tresestrellas">Tres Estrellas</option>
<option class="level-0" value="cuatroestrellas">Cuatro Estrellas</option>
<option class="level-0" value="cincoestrellas">Cinco Estrellas</option>
</select>

例如，我想为图像“ http://www.domain.com/images/unaestrella.png ”更改“Una Estrella”。这可能吗？

谢谢！

4

1 回答 1

1

不它不是 。因为 option 元素只能有 text 。但是您可以使用 jquery 更改 tex

$('option[value="unaestrella"]').text('some lame text')

或者您可以查看一些 jquery 插件（模仿选择功能以使您能够在其中包含图像），就像@PLS 所说的那样；

这里有一些插件：

ddSlick

图像选择器

如何使用 ddSlick

首先你需要像这样创建一个对象数组

//Dropdown plugin data
var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: true,
        description: "Description with LinkedIn",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    }
];

然后就

$('#demoBasic').ddslick({
    data: ddData,
    width: 300,
    imagePosition: "left",
    selectText: "Select your favorite social network",
    onSelected: function (data) {
        console.log(data);
    }
});

注意：上面的代码直接取自网站:)。

于 2013-10-06T19:47:52.393 回答