不能以所需的方式进行ajax调用

Question

我想在选择option的{​​{1}}时获取JSON数据我的javascript代码是

select

var root = 'http://jsonplaceholder.typicode.com/posts';
            $(function(){
                var log = $('#log');
                $('#comment').alwaysChange(function(val){
                    print('SELECTED '+ val);

                    $.ajax({
                      url: root,
                      method: 'GET'
                    }).then(function(data) {
                      console.log(data);
                    });
                });
                
                function print(text){
                    log.prepend('<p>' + text + '</p>');
                }
            });




            $.fn.alwaysChange = function(callback){
                return this.filter('#comment').each(function(){
                    var elem = this;
                    var $this = $(this);
                    
                    $this.change(function(){
                        callback($this.val());
                    }).focus(function(){
                        elem.selectedIndex = -1;
                        elem.blur();
                    });
                });
            }

上面的代码按预期工作，但我希望有两个<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="comment"> <option>Select...</option> <option>Yes</option> <option>No</option> </select> <br/> <div id="log"></div>元素作为

<select>

在此之后我想获得标识为<select id="num"> <option>Select...</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <br/> <select id="comment"> <option>Select...</option> <option>Yes</option> <option>No</option> </select> 的select元素的选定<option>的值，并将ajax url构建为

#num

我试过这种方式

var root = 'http://jsonplaceholder.typicode.com/posts' + "value of selected `<option>` of select element with id `#num`" + "if value of selected `<option>` of select element with id `#comment` is 'Yes' then add '/comments' at the end of the url else nothing be added";

var root = 'http://jsonplaceholder.typicode.com/posts';
            $(function(){
                var log = $('#log');
                $('#comment').alwaysChange(function(val){
                    if(val == "Yes"){
                        $.ajax({
                          url: root+"/"+$('#num option:selected').text() + "/comments", 
                          method: 'GET'
                        }).then(function(data) {
                          console.log(data);
                        });
                    }else{

                        $.ajax({
                          url: root,
                          method: 'GET'
                        }).then(function(data) {
                          console.log(data);
                        });
                    }
                });
                
                function print(text){
                    log.prepend('<p>' + text + '</p>');
                }
            });




            $.fn.alwaysChange = function(callback){
                return this.filter('#drop-location').each(function(){
                    var elem = this;
                    var $this = $(this);
                    
                    $this.change(function(){
                        callback($this.val());
                    }).focus(function(){
                        elem.selectedIndex = -1;
                        elem.blur();
                    });
                });
            }

但上面的代码不起作用

Answer 1

将#drop-location更改为#comment

请参阅：

＆＃13;

＆＃13;

var root = 'http://jsonplaceholder.typicode.com/posts';
            $(function(){
                var log = $('#log');
                $('#comment').alwaysChange(function(val){
                    if(val == "Yes"){
                        $.ajax({
                          url: root+"/"+$('#num option:selected').text() + "/comments", 
                          method: 'GET'
                        }).then(function(data) {
                          console.log(data);
                        });
                    }else{

                        $.ajax({
                          url: root,
                          method: 'GET'
                        }).then(function(data) {
                          console.log(data);
                        });
                    }
                });
                
                function print(text){
                    log.prepend('<p>' + text + '</p>');
                }
            });




            $.fn.alwaysChange = function(callback){
                this.filter('#comment').each(function(){
                    var elem = this;
                    var $this = $(this);
                    
                    $this.change(function(){
                        callback($this.val());
                    }).focus(function(){
                        elem.selectedIndex = -1;
                        elem.blur();
                    });
                });
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="num">
    <option>Select...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<br/>
<select id="comment">
    <option>Select...</option>
    <option>Yes</option>
    <option>No</option>
</select>

<br/>

<div id="log"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不明白这句话的作用，但我将其删除并且有效

return this.filter('#drop-location').each(function(){

插件应该应用于元素，你要过滤元素，结果为null，因此没有事件附加到元素。

＆＃13;

＆＃13;

var root = 'http://jsonplaceholder.typicode.com/posts';
            $(function(){
                var log = $('#log');
                $('#comment').alwaysChange(function(val){
                    if(val == "Yes"){
                       log.text(root+"/"+$('#num option:selected').text() + "/comments")
                    }else{
                     log.text(root)
                    }
                });
                
               
            });




            $.fn.alwaysChange = function(callback){
                    var elem = this;
                    var $this = $(this);
                    
                    $this.change(function(){
                        callback($this.val());
                    }).focus(function(){
                        elem.selectedIndex = -1;
                        elem.blur();
                    });
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="num">
    <option>Select...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<br/>
<select id="comment">
    <option>Select...</option>
    <option>Yes</option>
    <option>No</option>
</select>

<br/>

<div id="log"></div>

＆＃13;

＆＃13;

＆＃13;