Question

我正在尝试使用两个不同的查询字符串创建一个表单。到目前为止，我可以使用onChange每个下拉菜单一次传递一个字符串。

有没有办法让提交按钮同时传递两个变量？和onSubmit一样，页面转到“www.address.com/cal?event=var1&date=var2”谢谢！

到目前为止我的代码：

<form name="eventSearch" method="get">
  <select id="event" onchange="location = this.options[this.selectedIndex].value;">
    <option value="">all events</option>
    <option value="http://www.whateverwebsite.com/cal/month?event=event1">event1</option>
    <option value="http://www.whateverwebsite.com/cal/month?event=event2">event2</option>
    <option value="http://www.whateverwebsite.com/cal/month?event=event3">event3</option>
  </select>
  <br>
  <select id="month" onchange="location = this.options[this.selectedIndex].value;">
    <option value="">Current Month</option>
    <option value="http://www.whateverwebsite.com/cal/month?date=2014-09">September 2014</option>
    <option value="http://www.whateverwebsite.com/cal/month?date=2014-10">October 2014</option>
    <option value="http://www.whateverwebsite.com/cal/month?date=2014-11">November 2014</option>
    <option value="http://www.whateverwebsite.com/cal/month?date=2014-12">December 2015</option>
    <option value="http://www.whateverwebsite.com/cal/month?date=2015-01">January 2015</option>
    <option value="http://www.whateverwebsite.com/cal/month?date=2015-02">February 2015</option>
  </select>

Answer 1

按预期使用select元素，将值作为表单提交的一部分传递：

<form name="eventSearch" method="get" action="http://www.whateverwebsite.com/cal/month">
  <select name="event" id="event" onchange="this.form.submit();">
    <option value="">all events</option>
    <option value="event1">event1</option>
    <option value="event2">event2</option>
    <option value="event3">event3</option>
  </select>
  <br>
  <select name="date" id="month" onchange="this.form.submit();">
    <option value="">Current Month</option>
    <option value="2014-09">September 2014</option>
    <option value="2014-10">October 2014</option>
    <option value="2014-11">November 2014</option>
    <option value="2014-12">December 2015</option>
    <option value="2015-01">January 2015</option>
    <option value="2015-02">February 2015</option>
  </select>
</form>

Answer 2

如果我理解你想要实现的目标::即获得两个不同的值到同一个url 您可以使用Javascript发布/获取结果，即

<button type="button" id="submit" >submit</button>

$('#submit').click(function(){
    var event = $('#event').val();
    var date =  $('#month').val();
    $.get("http://www.whateverwebsite.com/cal/month?event=" + event + "?date=" + date,function(response){
           response = JSON.parse(response);
           //do anything with response
    });

}）;

下拉菜单传递两个查询字符串

2 个答案: