Question

如何将小图像弹出按钮添加到html选择下拉列表？这个想法是，当你逐项向上或向下按列表（悬停？）时，弹出按钮会在下拉列表的左侧或右侧发生变化（可能是75像素的正方形）。这不是图像列表。

编辑1 这是我的示例源代码：

HTML

  <Select id="products" onchange="if (this.selectedIndex) showImg();" style="width:200px">
    <option value="1" selected>prod1</option>    
    <option value="2">prod2</option>
  </Select>

的Javascript

function showImg()
{
/*alert("You have selected some of the text!");*/
/*TODO: flyout image based on option/Id"
}

Answer 1

你可以尝试这个（使用jQuery）：

<强> HTML：

    <table>
    <tr>
        <td>
            <select id="mySelect">
                <option value="" img="">Select an Item!</option>
                <option value="1" img="http://www.dummyimage.com/100x50/3a52f2/fff.png">Item 1</option>
                <option value="2" img="http://www.dummyimage.com/100x50/00ff00/fff.png">Item 2</option>
                <option value="3" img="http://www.dummyimage.com/100x50/00cc99/fff.png">Item 3</option>
                <option value="4" img="http://www.dummyimage.com/100x50/FF5200/fff.png">Item 4</option>
            </select>
        </td>
        <td>
            <img id="myImage" src=""></img>                
        </td>
    </tr>
</table>

<强> JavaScript的：

$(function(){
    // when the select changes...
    $( "#mySelect" ).change(function(event) {

        // gets the img attribute (custom attribute) of the selected option
        var image = $(this).find( ":selected" ).attr( "img" );

        // configure the src attribute of the img tag to use the value of the select option img attribute
        $( "#myImage" ).attr( "src", image );
    });
});

JsFiddle：http://jsfiddle.net/davidbuzatto/UzyQj/

如何将图像弹出按钮添加到html选择下拉列表中

1 个答案: