Question

我使用了一个jquery插件用于选择下拉菜单中的图像，我想将页面重定向到选择菜单的选项值中提供的特定网址。但我无法重定向它。请指导我以下是代码。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ddslick.min.js">
</script>
</head>
<body>
<div id="myDropdown"></div>
<script type="text/javascript">
//Dropdown plugin data
var ddData = [
    {
        text: "Facebook",
        value: "http://www.facebook.com",
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: "http://www.google.com",
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        description: "Description with LinkedIn",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        description: "Description with Foursquare",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    }
];
//Code Ends
//Code Starts
$('#myDropdown').ddslick({
    data:ddData,
    width:300,
    selectText: "Select your preferred social network",
    imagePosition:"right",
    onSelected: function(selectedData){

    }   
});
$(document).ready( function() {
   $('#myDropdown').change( function() {
      location.href = $(this).val();
   });
});


//Code Ends
</script>
</body>
</html>

请帮帮我..

Answer 1

ddslick插件会将您的select元素替换为其他元素，以便进行光滑的下拉菜单，因此您无法使用原始选择的更改事件。相反，您应该使用插件的onSelected事件：

$('#myDropdown').ddslick({
    data:ddData,
    width:300,
    selectText: "Select your preferred social network",
    imagePosition:"right",
    onSelected: function(selectedData){
        location.href = selectedData.selectedData.value;
    }   
});

Answer 2

这是我的解决方案：

http://jsfiddle.net/HaCTg/5/

JS：

$(document).ready( function() {
   $('#myDropdown .dd-option').click( function(e) {
      e.preventDefault();
      location.href = ($(this).children('.dd-option-value').val());
   });
});

请注意，jsfiddle实际上不会重定向您，但如果您更改：

location.href = ($(this).children('.dd-option-value').val());

成：

console.log($(this).children('.dd-option-value').val());

您将看到代码正常运行。

无法从选择下拉菜单中重定向选择页面

2 个答案: