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更改事件确实工作正常但技能值没有任何值。还建议我如何压缩此代码。我只想根据技能和电话价值来检查变更事件调用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”事件至少发生一次之前，您的两个后续自动完成处理程序不受约束，因为它们是在该代码块中声明的。而且，如果“更改”事件多次发生，那么多个处理程序将附加到其他两个元素，然后当这些事件被触发时，代码的多个副本将运行 - 我怀疑这是你的意图。

Answer 2

#skills的更改处理程序和#phone的单击处理程序只能在#findUserType上触发第一个更改事件后注册。

将这两个处理程序移到＃findUserType的更改处理程序之外。

Answer 3

$(document).ready(function(){

    $("#findUserType").change(function () {

        var user_type = $(this).val();
    });

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

        $("#phone").change(function () {
            var phone = $(this).val();
        });

      });

我希望你这可以帮助你在选择用户类型时获得技能和电话的价值。

一起调用更改并单击事件jquery

3 个答案: