Question

我需要在选项值中更改图像的文本。我的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>

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

谢谢！

Answer 1

不，不是。 becuase选项元素只能有文字。但您可以使用

更改带有jquery的tex

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

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

以下是一些插件：

ddSlick

Image Picker

如何使用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);
    }
});

注意：上面的代码是从网站上获取的:)。

用图像更改选项值的文本

1 个答案: