Javascript单选按钮问题

Question

我有两个单选按钮 - “意大利语”和“西班牙语”。选择一个时，我不会自动完成从不同文件填充的“主要”和“启动”输入。因此，当检查“西班牙语”时，它确实会从 @987654321 @中自动完成，并且当检查'italian'时，它会从 @987654322 @。

var radio1 = document.getElementById("radio1");
var radio3 = document.getElementById("radio3");

if (radio1.checked){
    alert("radio1 selected");


        //Starter Autocomplete  (Spanish)         
        var starterSearchData;
        $(function() {
            $.ajax({
                url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
                dataType: "jsonp",
                async: false,
                success: function(data) {
                    starterSearchData = $.map(data, function(item) {
                        if (item.course == "starter")
                            return item.name;
                    });
                    EnableAutoComplete();
                },
                error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });

            function EnableAutoComplete() {
                $("#starter").autocomplete({
                    source: starterSearchData,
                    minLength: 2,
                    delay: 010
                });
            }
        });

        //Main Autocomplete   (Spanish)          
        var mainSearchData;
        $(function() {
            $.ajax({
                url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
                dataType: "jsonp",
                async: false,
                success: function(data) {
                    mainSearchData = $.map(data, function(item) {
                        if (item.course == "main")
                            return item.name;
                    });
                    EnableAutoComplete();
                },
                error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });

            function EnableAutoComplete() {
                $("#main").autocomplete({
                    source: mainSearchData,
                    minLength: 2,
                    delay: 010
                });
            }
        });

}else if (radio3.checked) { .... same code, except url changed to http://xxx/italian.php... }

HTML：

<div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Spanish</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Italian</label>
</div>
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>

ajax 调用等可以正常工作，但是当我尝试 if 语句时，字段不会填充/自动完成。

谢谢。

Answer 1

您可以使用收音机的值作为 ajax 中的 url。并通过 jquery 选择器检索检查值。

 //Starter Autocomplete  (Spanish)         
    var starterSearchData;
    $(function() {
        $.ajax({
            url: $("#radio input:checked").val(),
            dataType: "jsonp",
            async: false,
            success: function(data) {
                starterSearchData = $.map(data, function(item) {
                    if (item.course == "starter")
                        return item.name;
                });
                EnableAutoComplete();
            },
            error: function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });

        function EnableAutoComplete() {
            $("#starter").autocomplete({
                source: starterSearchData,
                minLength: 2,
                delay: 010
            });
        }
    });

    //Main Autocomplete   (Spanish)          
    var mainSearchData;
    $(function() {
        $.ajax({
            url: $("#radio input:checked").val(),
            dataType: "jsonp",
            async: false,
            success: function(data) {
                mainSearchData = $.map(data, function(item) {
                    if (item.course == "main")
                        return item.name;
                });
                EnableAutoComplete();
            },
            error: function(xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });

        function EnableAutoComplete() {
            $("#main").autocomplete({
                source: mainSearchData,
                minLength: 2,
                delay: 010
            });
        }
    });

HTML：

    <div id="radio">
    <input type="radio" id="radio1" name="radio" value="http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php"><label for="radio1">Spanish</label>
    <input type="radio" id="radio3" name="radio" value="http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/italian.php"><label for="radio3">Italian</label>
</div>
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>