Question

我有一个共享视图，将为集合中的每个项目调用。在此视图中，我想要一个下拉列表，其中包含所选信息项的ID，文本和图像URL。选择项目时，我想在图像标签中显示图像。我得到了这段代码

            <select id="themes" onchange="javascript:document.getElementById('themePlaceHolder').src=this.options[this.selectedIndex].getAttribute('data-url')">
            <option value="" data-Url="" >Select a theme</option>
            @foreach(Theme theme in Model.Themes) {
            <option value="@theme.Id" data-url="@theme.Url" >@theme.Name</option>
            }
            </select>
            <img id="themePlaceHolder" src="" />

当我的集合只有一个元素时，这种方法很有效，但如果它有2个或更多元素，我就会发现用于识别图像标记的ID有问题，因为它是重复的。

是否有生成ID以便它不重复但仍然在我的onchange元素上引用它？

Answer 1

尝试使用jQuery：

伪代码：

 <select class="themes">
    <option value="" data-Url="" >Select a theme</option>
       @foreach(Theme theme in Model.Themes) {
          <option value="@theme.Id" data-url="@theme.Url" >@theme.Name</option>
       }
 </select>
 <img id="themePlaceHolder" src="" />

$(".themes").change(function(){
  // to get selected text
  $(this + " option:selected").text();

 // to get selected value
 $(this).val();

// Now do what ever you want using this value
});

如何防止部分视图中的重复ID并仍然在Javascript代码中引用它们？

1 个答案: