JSFiddle Example

Question

我的页面中有一个Image和Dropdownlist控件。我试图通过图像控件的click事件显示下拉列表项。

这可以在JQuery中使用吗？或者给我另一种方法来做到这一点？

这是我的HTML

@Html.DropDownListFor(model => model.Subjects.Name, (IEnumerable<SelectListItem>)ViewBag.Subject, "--")
@Html.TextBoxFor(model => model.Subjects.Name, new { @data_otf_autocomplete = @Url.Action("Autocomplete_Subject"), @class = "Text_Subject_Name" }) <img src="~/Images/arrow-down.gif" alt="click to choose Subjects" id="arrow" />

点击Image[id='arrow']会打开dropdownlist[id=Subject_Name"]项目吗？

我得到了一个相同的例子@ http://jsfiddle.net/an3ZT/基于这个例子我在下面创建的代码不起作用？

<script src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.simulate.js"></script>    


<script type="text/ecmascript">
    $(document).ready(function () {

        $("img").click(function () {
            //alert("Hellow world");
            //alert($("select").val());
            $("select").simulate('mousedown');

        });

    });
</script>

 <select>
    <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>    
</select>

<img src="https://www.google.com/images/srpr/logo11w.png"/>

请告诉我错误的地方？

Answer 1

要记住的初步注意事项

作为打开<select>元素列表问题的特定解决方案，您无法在本机模拟鼠标触发器的事件;因此，您需要使用.simulate函数，但是，这是jQuery的附加库。您需要导入：

jquery.simulate.js

解决方案

如果你想在任何元素的点击上触发一个事件，那么用jQuery很容易。

例如，假设您有以下图片：

<img src="someImage.jpg">

要触发任何功能，您只需使用document.ready()和img.click

即可

$(document).ready(function(){

    $("img").click(function(){

        $("select").simulate('mousedown');

    });

});

但是，如果页面上有多个img元素，则会出现问题;当然，除非您希望每个图像在单击时触发下拉列表，否则最好将一些特定信息提供给您要触发列表的图像元素。

这可以通过为图像提供id或类，或者实际上任何属性来实现，以区别于页面上的其他图像。这也可用于创建一组将调用列表的图像元素。

使用id：

<img id="myImage">

$(document).ready(function(){

    $("#myImage").click(function(){

        $("select").simulate('mousedown');

    });

});

使用班级

您可以通过为同一个类提供多个元素来创建组

<img class="myImage">

$(document).ready(function(){

    $(".myImage").click(function(){

        $("select").simulate('mousedown');

    });

    //OR to be more specific

    $("img.myImage").click(function(){});

});

使用属性

您实际上可以设置自定义属性，并使用它来区分html中的其他图像。

<img someAttr="useThisOne">

$(document).ready(function(){

    $("img").click(function(){

        if($(this).attr("someAttr") == "useThisOne")
        {
            $("select").simulate('mousedown');
        }
    });

});

通过图片点击事件显示下拉列表项目？

1 个答案: