Question

我正在尝试在模式内部实现附加。我成功按照以下代码使用get请求获取select的值

    $('#xservice').change(function() {
    var select = $("#sampleDoc").empty();
    let x = $('#xdate').empty();
    console.log(select);
    console.log("Sample");
    $.get('api.php', {service: $('#xservice').val(),date: $('#xdate').val(), time: $("#xtime").val()}, function(result) {
        $.each(result, function(i, item) {
            console.log(item);
            $("<option value=" + item.value + ">" + item.name + "</option>").
            appendTo(select);
        });
    });
});

控制台有此回复

这是我的查看代码

        <select name="sampleDoc" id="sampleDoc" class="form-control" required>
              <option value="" selected>-- Please Select -- </option>
          </select>

因此，每当我尝试使用onchange函数时，控制台都会成功登录，并且结果成功，但是select不会更改，或者根本不会传递值。

Answer 1

您错误地将生成的Item内容附加到结果中

尝试

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="xservice" id="xservice" class="form-control" required>
   <option>1</option>
   <option>2</option>
</select>

<select name="sampleDoc" id="sampleDoc" class="form-control" required>
   <option value="" selected>-- Please Select -- </option>
</select>

$('#xservice').change(function() {
    var select = $("#sampleDoc").empty();
    let x = $('#xdate').empty();
    console.log(select);
    console.log("Sample");
    $.get('api.php', {service: $('#xservice').val(),date: $('#xdate').val(), time: $("#xtime").val()}, function(result) {
        $('#sampleDoc').append('<option value="" selected>-- Please Select -- </option>');
        $.each(result, function(i, item) {
            $('#sampleDoc').append($("<option value=" + item.value + ">" + item.name + "</option>"));
        });
    });
});

在调用任何jquery代码之前不要忘记添加jquery.js

Answer 2

已编辑：
现在，您可以在此处测试工作示例，并对API遵循相同的方式。

您必须为此元素#sampleDoc附加一个值，并且该值也应包含""

$('#xservice').change(function() {

    var select = $("#sampleDoc").empty();
    
    //let x = $('#xdate').empty();
    //console.log(select);
    //console.log("Sample");
    
    $.get('https://reqres.in/api/users?page=2', {
    
        service: $('#xservice').val(),
        date: $('#xdate').val(),
        time: $("#xtime").val()
        
    }, function(result) {
        
        var data = result.data;
        
        //console.log(data);
        
        $.each(data, function(i, item) {
        
            console.log(item.first_name);
        
            var text = '<option value="' + item.id + '">' + item.first_name + '</option>';
                    
            $("#sampleDoc").append(text);
        
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="xservice" id="xservice" class="form-control" required>
   <option>1</option>
   <option>2</option>
</select>

<select name="sampleDoc" id="sampleDoc" class="form-control" required>
   <option value="" selected>-- Please Select -- </option>
</select>

jQuery onchange appendTo在模式内部不起作用

2 个答案: