Jquery 根据从下拉列表中选择的值显示

我希望能够在选择下拉选项值时显示。以下是下拉选项的html：

<select id="gridSelection">
<option value="0">Select a option</option>
<option value="1">grid 1</option>
<option value="2">grid 2</option>
<option value="3">grid 3</option>
<option value="4">grid 4</option>
</select>

因此，在上述情况下，第一个生成的是带有测试信息和id=widget_0的图像，依此类推

我希望使用jquery显示从下拉列表中选择的。 有什么想法吗？？？如果我遗漏了任何信息，请随时询问更多信息

提前感谢….

试试看

jQuery(function ($) {
    $('#gridSelection').change(function () {
        var id = '#widget_' + $(this).val();
        var $target = $(id).show();
        $('.gridContainer li:not(' + id + ')').hide()
    }).change()
})

---

演示：

您是否为那些li元素（如widget_1或widget_0）设置了类或id抽象地说，解决方案可能看起来像是的，我确实为每个元素设置了id。但是，与静态：widget_0 widget_1 widget_2 widget_3不同，我获取的“id”是通过json获取的，正如您在上面的代码中所看到的……感谢Arun……这与元素的静态列表不同，但我有一个json对象，其中包含图像作为内容和“widgetId”：“widget_0”、“widget_1”等等，如您所见。如何获取widgetid以显示我要选择的contentimage？我使用类似这样的方式从json字段获取id：

var serialize = [
    {
        "widgetId": "widget_0",
        "title": "Test Info",
        "description": "",
        "type": "info",

         "path":"test-info.png",
        "dataType": "TEST_INFO",
        "position": {
            "col": 1,
            "row": 1,
            "size_x": 1,
            "size_y": 2
        }
    },
    {
        "widgetId": "widget_1",
        "title": "Test Details",
        "description": "",
        "type": "info",
        "path":"test-details.png",
        "dataType": "TEST_DETAILS",
        "position": {
            "col": 2,
            "row": 1,
            "size_x": 2,
            "size_y": 2
        }
    }];

jQuery(function ($) {
    $('#gridSelection').change(function () {
        var id = '#widget_' + $(this).val();
        var $target = $(id).show();
        $('.gridContainer li:not(' + id + ')').hide()
    }).change()
})