Question

我希望能够在选择下拉选项值时显示<li>。这是下拉列表的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>

我的<li>动态生成如下：

<ul class ="gridContainer">
  <li id="widget">
   <img src="images/{{path}}" alt="" />
</li> 
</ul>

使用json表数据生成列表：

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
        }
    }];

所以在上面的例子中，生成的第一个<li>将是带有“Test-info”和id =“widget_0”的图像等等。

我希望使用jquery显示我从下拉列表中选择的<li>。任何想法???如果我可能错过了任何想法，请随时询问其他信息..

提前致谢....

Answer 1

尝试

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

演示：Fiddle

显示<li>，具体取决于从下拉列表中选择的值</li>

1 个答案: