Question

我有两个单选按钮 - '意大利'和“西班牙”。当选择一个时，我不会从不同的文件填充“Main”和“Starter”输入的自动完成。因此，当选中“西班牙语”时，它会从http://xxx/spanish.php自动完成，当检查“意大利语”时，它会从http://xxx/italian.php执行。

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中的网址。并通过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>

Javascript单选按钮问题

1 个答案: