javascript - jquery一起调用change和click事件

Question

我无法使用 id 访问技能值，但可以访问 finduserType 值。

我不知道为什么，它也应该调用更改事件和单击事件。

  $(function() {


    $("#findUserType").change(function () {
        var user_type = $("#findUserType").val();
        var skills = $("#skills").val();
        var phone = $("#phones").val();

    var src = '{{Request::root()}}/api/user/suggestion/email';
    var srcPhone = '{{Request::root()}}/api/user/suggestion/phone';


   /* var skills = $("#skills").val();

    var phone = $("#phones").val();*/
    // Load the Users from the server, passing the usertype as an extra param
    $("#skills").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                method: 'GET',
                dataType: "json",
                data: {
                    term : skills,
                    user_type : user_type
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 300
    });

    // Load the Users from phone to the server, passing the usertype as an extra param
    $("#phones").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: srcPhone,
                dataType: "json",
                data: {
                    term : phone,
                    user_type : user_type
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 300
    });

  });  

});

<form>
    <div class="input-group">
        <select class="form-control" id="findUserType" name="finduser">
            <option value="">--Select--</option>
            <option value="2">D</option>
            <option value="3">P</option>
        </select>
    </div>
    <div class="input-group">
        <input type="text" id="skills" class="form-control">
        <input type="text" id="phones" class="form-control" name="phone">
    </div>
</form>

更新了代码，请看看我到底要卡住什么，它不接受电子邮件的值。当我调用 ajax 更改事件时确实工作正常，但技能值没有任何值(value)。还建议我如何压缩此代码。我只想根据技能和电话值检查更改事件调用 ajax。

Answer 1

我认为这样会更好:

$("#findUserType").change(function() {
  if ($(this).val() == "") {
    $("#textboxes").hide();
  } else {
    $("#textboxes").show();
  }

});

$("#skills").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: src,
      method: 'GET',
      dataType: "json",
      data: {
        term: $("#skills").val(),
        user_type: $("#findUserType").val()
      },
      success: function(data) {
        response(data);
      }
    });
  },
  min_length: 3,
  delay: 300
});

// Load the Users from phone to the server, passing the usertype as an extra param
$("#phones").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: srcPhone,
      dataType: "json",
      data: {
        term: $("#phones").val(),
        user_type: $("#findUserType").val()
      },
      success: function(data) {
        response(data);
      }
    });
  },
  min_length: 3,
  delay: 300
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="form-control" id="findUserType" name="finduser">
        <option value="">--Select--</option>
        <option value="2">Doctor</option>
        <option value="3">Pharmacy</option>
    </select>
  <br/>
  <div id="textboxes" hidden>
    <input type="text" id="skills" class="form-control">
    <br/>
    <input type="text" id="phones" class="form-control" name="phone">
  </div>
</form>

目前，在“findUserType”的“change”事件至少发生一次之前，您的两个后续自动完成处理程序不会绑定(bind)，因为它们是在该代码块中声明的。而且，如果“更改”事件发生多次，则多个处理程序将附加到其他两个元素，然后当触发这些事件时，将运行代码的多个副本 - 我怀疑这就是您的意图。