Question

我有2个Selectbox

Countrynames
机场

当我在第一个选择框中选择一个国家/地区名称时，将发送一个Ajax请求并返回一个Airposts列表作为选项，如

"
<option value='1'>abc
<option value='3'>lmn
<option value='2'>xyz
"

现在我只需要替换select标签的选项。我正在尝试做类似

var country_select = document.getElementById("country_select");
country_select.options.length = 0;
country_select.options = response.responseText

但这项任务无效我怎样才能完成它！

Answer 1

尝试

var country_select = document.getElementById("country_select");
country_select.innerHTML = response.responseText;

Answer 2

这有点棘手，你将无法使用innerHTML或类似的东西来做到这一点。你必须改变你的ajax返回机场名称的方式。而不是<option>abc</option><option>xyz</option>返回由例如||分隔的一串名称：abc||def||xyz。然后将该字符串分解为JS中的数组，从数组中的每个元素创建一个选项元素，并将其添加到下拉列表中。检查一下：

<html>
<head>
    <script>
        var ajaxResponse = "abs||def||xyz||test||blah";

        function updateOptions( optionsString )
        {
            var options = optionsString.split("||");

            for( var i=0; i< options.length; i++ )
            {
                AddItem( options[i], options[i] );
            }
        }

        function AddItem(Text,Value)
        {
            var opt = document.createElement("option");
            opt.text = Text;
            opt.value = Value;

            document.getElementById("mydropdown").options.add(opt);
        }

        function removeOptions()
        {
            document.getElementById('mydropdown').length = 0;
        }
    </script>
</head>
<body>
    <input type="button" onclick="updateOptions(ajaxResponse)" value="update"></input>
    <input type="button" onclick="removeOptions()" value="remove"></input>
    <select id="mydropdown">
    </select>
</body>
</html>

更新Selectbox选项

2 个答案: