Question

该应用程序显示了一个包含表单元素的html页面。表单有几个提交按钮。其中一个是标题为＆＃34; Close deal＆＃34;的按钮。当用户单击此按钮时，会出现一些上下文菜单。上下文菜单有选项，如＆＃34;未提交＆＃34;，＆＃34;价格太高＆＃34;，＆＃34;其他＆＃34;。单击选项应该提交表单（就像提交按钮一样）。后端需要知道用户点击了其中一个选项（而不是其他提交按钮）以及哪个选项。

如何实现？

我找到了一个jquery ui split button example，但它没有提供所需的功能。例如，不需要两个按钮（一个带有文本，一个带箭头） - 只有一个行为 - 显示上下文菜单。另外，我不明白如何制作提交表格的项目。

我试图找到其他东西，却未能找到足够接近要求的东西。

Answer 1

从您链接到的JQuery UI Split Button Widget开始，在这里进行一些调整，以便在点击时提供一个按钮，可以选择以及单击选项时的点击（按钮和列表项）通过表单POST发送到服务器。

HTML：

<form id="deal_form">
    <input type="hidden" name="submit_action" value=""/>
    <input type="hidden" name="submit_type"   value=""/>
</form>
<div>
  <div id="submit_actions">
    <button id="close_deal">Close Deal</button>
  </div>
  <ul>
    <li>Not Submitted</li>
    <li>Price Too High</li>
    <li>Other</li>
  </ul>
</div>

JavaScript的：

$(function() {
    $( "#close_deal" )
    .click(function(evtCD) {
        var menu = $( this ).parent().next().show().position({
            my: "left top",
            at: "left bottom",
            of: this
        });
        $("#deal_form input[name='submit_action']").val(evtCD.target.innerHTML);
        $( document ).one( "click", function(evtDOC) {
            menu.hide();
            if ( 'LI' === evtDOC.target.tagName ) {
                $("#deal_form input[name='submit_type']").val(evtDOC.target.innerHTML);
                $("#deal_form").submit();
            }
        });
        return false;
    })
    .parent()
    .buttonset()
    .next()
    .hide()
    .menu();
});

当然，您可以在单击按钮和列表项之前向表单添加更多输入，并在表单提交时发送这些值。

JSFiddle with it here.

Answer 2

它可能会发送某种ajax帖子或获取请求。我一直都在做过滤器等。

＆＃13;

 
$('#btn1').click(function(){
$.post( "pages/somepage.php?view", { 
    id: $(this).attr('data-rel')
    }).done(function( data ) {
    $(".right-side").html( data );
});
});

$('#btn2').click(function(){
 $.post( "pages/somepage.php?delete", { 
    id:  $(this).attr('data-rel')
    }).done(function( data ) {
    $(".right-side").html( data );
});
});

＆＃13;

<form name="d" >
  <button id="btn1" data-rel="1" >Do something</button>
  <button id="btn2" data-rel="2" >Do something else</button>
 </form>

＆＃13;

提交按钮作为子项的按钮

2 个答案: