javascript - jquery ddslick 不工作

Question

好的，这是我之前提出的问题的继续: iFrame with Variable URL in PHP Variable 我什至将其设置为在页面准备好时自动打开，但这仍然不起作用。

现在我使用 ddslick，这样我就可以在表单中的每个下拉列表旁边显示一个图标。 这就是我正在做的事情:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ddslick.min.js"></script>

然后在下拉菜单中:

<select form="form1" id="MyMenu">
    <option value="0" data-imagesrc="http://example.com/entry/value0.png" data-description="Description 0" >Nothing</option>
    <option value="1" data-imagesrc="http://example.com/entry/value1.png" data-description="Description 1" >Value 1</option>
    <option value="2" data-imagesrc="http://example.com/entry/value2.png" data-description="Description 2" >Value 2</option>
</select>

脚本:

<script>
//Make it slick!
$('#make-it-slick').on('click', function(){
    $('#MyMenu').ddslick();
});
//Restore Original
$('#restore').on('click', function(){
    $('#MyMenu').ddslick('destroy');
});
$(document).ready(function(){
   $('#MyMenu').ddslick(); // Turn on Slickness
});
</script>

最后是表格

<form name="form1" id="form1">
    <input type="submit" name="submit" id="submit" value="Submit Form">
    <button id="make-it-slick"> Make it slick!</button>
    <button id="restore"> Restore to Original</button>
</form>

Answer 1

请将您在 script 标签中编写的代码替换为以下代码

<script type="text/javascript">
//Make it slick!
$(document).ready(function(){
   $('#MyMenu').ddslick(); // Turn on Slickness

   $('#make-it-slick').click(function(){
    $('#MyMenu').ddslick();
    return false; //do not propogate click
   });

   $('#restore').click(function(){
    $('#MyMenu').ddslick('destroy');
    return false; //do not propogate click
    });

});
</script>

使用您的代码，当单击按钮时，会跟随该单击并提交表单。表单中的 button 标记提交表单。所以现在我们需要做的是，当单击按钮时，表单不应该被提交，而应该只执行 javascript 代码。我们通过在 click 方法中返回 false 来做到这一点。

希望这有帮助:)