基于下拉选项的多个提交按钮

时间:2013-07-09 17:33:39

标签: javascript html forms drop-down-menu submit-button

新手问题......想知道javascript是否可以成为解决方案?

是否可以使用包含多个选项的下拉菜单。然后,根据选择的选项确定两个提交按钮的动作?

在这种情况下,每个提交按钮都会链接到,这取决于下拉列表中选择的选项...每个按钮上的链接是不同的?

2 个答案:

答案 0 :(得分:0)

为什么不将javascript函数绑定到按钮的onClick方法。然后在该函数内部,您可以查询下拉列表框的当前选择并执行相应的操作吗?

答案 1 :(得分:0)

是的,您可以轻松使用Jquery。在下拉选项完成后,您只需将click事件分配给提交按钮。

查看http://api.jquery.com/change/向下拉菜单添加更改事件处理程序。在更改事件处理程序中为提交按钮设置适当的单击处理程序。

这是一个例子。 http://jsfiddle.net/24Vbr/6/

HTML

    <form>
      <input class="target" type="text" value="Field 1" />
        <select class="target">
          <option value="option1" selected="selected">Option 1</option>
          <option value="option2">Option 2</option>
        </select>  
      <button id='button1' type="button">Button with changing click handler based on dropdown </button>
    </form>
    <div id="other">
  Trigger the handler

JS

var onSubmit1 = function()
{
    alert('submit1');
};

var onSubmit2 = function()
{
    alert('submit2');
};



$('.target').change(function(e) {    
    var dropdown = $('.target');
    var text = $( ".target option:selected" ).text();    

    var $button1= $('#button1');
    $button1.unbind('click');

    if(text == "Option 1"){
         $button1.click(onSubmit1);
        return;
    }

   $button1.click(onSubmit2);      
});