Question

这应该很简单，但过去三个小时我一直在圈子里...我知道我应该更改SELECT的ID以匹配jquery函数的ID，但还有另一个步骤（显然）我失踪了。

我正在使用jqueryui datepicker，我只是希望在使用“select”下拉列表选择特定值时弹出，而不是在单击“input”字段时弹出。这是代码，提前感谢您的帮助：

/**
 * username: test, password: test
 * Added Header: param
 * REST URL: http://localhost:8080/hello
 */

package com.test;

import java.io.IOException;
import java.util.Collections;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;
import javax.servlet.http.HttpServletResponse;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.filter.OncePerRequestFilter;

@SpringBootApplication
public class TestRequestWrapperApplication {

    public static void main(String[] args) {
        SpringApplication.run(TestRequestWrapperApplication.class, args);
    }
}

@Component
class RequestWrapperFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        HeaderMapRequestWrapper wrappedRequest = new HeaderMapRequestWrapper((HttpServletRequest)request);
        wrappedRequest.addHeader("param", "Hello World!");

        filterChain.doFilter(wrappedRequest, response);
    }
}

@RestController
class TestRest {
    @GetMapping("hello")
    public String hello(@RequestHeader("param") String param) {
        return "param: " + param;
    }
}

@Configuration
class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication().withUser("test").authorities("test").password("test");
    }
}

class HeaderMapRequestWrapper extends HttpServletRequestWrapper {
    public HeaderMapRequestWrapper(HttpServletRequest request) {
        super(request);
    }

    private Map<String, String> headerMap = new HashMap<String, String>();

    public void addHeader(String name, String value) {
        headerMap.put(name, value);
    }

    public void removeteHeader(String name) {
        headerMap.remove(name);
    }

    @Override
    public String getHeader(String name) {
        String headerValue = super.getHeader(name);
        if (headerMap.containsKey(name)) {
            headerValue = headerMap.get(name);
        }
        return headerValue;
    }

    @Override
    public Enumeration<String> getHeaderNames() {
        List<String> names = Collections.list(super.getHeaderNames());
        for (String name : headerMap.keySet()) {
            names.add(name);
        }
        return Collections.enumeration(names);
    }

    @Override
    public Enumeration<String> getHeaders(String name) {
        List<String> values = Collections.list(super.getHeaders(name));
        if (headerMap.containsKey(name)) {
            values.add(headerMap.get(name));
        }
        return Collections.enumeration(values);
    }

}

Answer 1

当然，您可以将更改处理程序绑定到select元素并触发datepicker's show method，如：

$('select').change(function() {
  if ($(this).val() == 7) {
    $("#datepicker").datepicker("show")
  }
})

<强> jsFiddle example

Answer 2

是的，你可以做这样的事情。 UIGestureRecognizerDelegate将有助于确定在下拉列表中选择特定选项时要执行的操作，然后他们可以告诉switch()该做什么。

.datepicker()

$(function() {
  $("#datepicker").datepicker({
    minDate: 0,
    maxDate: "+2Y"
  }).hide();
  $("#select-date").change(function(e) {
    if ($(this).val() == "7") {
      $("#datepicker").show().datepicker("show");
    } else {
      $("#datepicker").datepicker("hide").hide();
    }
  });
});

如果您有兴趣，现在也可以使用ComboBox或Split Button执行此操作。为了更好地适应网站，您可以考虑：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<SELECT id="select-date">
  <option value="1">TODAY</option>
  <option value="2">TOMORROW</option>
  <option selected value="3">THIS WEEK</option>
  <option value="4">NEXT WEEK</option>
  <option value="5">THIS MONTH</option>
  <option value="6">NEXT MONTH</option>
  <option value="7">CALENDAR</option>
</SELECT>
<input type="text" id="datepicker">

$(function() {
  var $datepick = $("#datepicker"),
    $opt7 = $("#select-date option[value='7']");
  $datepick.datepicker({
    minDate: 0,
    maxDate: "+2Y",
    onSelect: function(sDate, dObj) {
      $opt7.html(sDate);
      $datepick.hide();
    }
  }).hide();
  $opt7.click(function(e) {
    $datepick.show().position({
      my: "left top",
      at: "right top",
      of: $("#select-date")
    });
  });
});

从选择下拉列表中触发jquery函数

2 个答案: