更新选择框选项

Question

我有 2 个选择框

国名
机场

当我 select 在第一个选择框中的国家/地区名称时，将发送 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>

更新选择框选项

问题描述

2 个解决方案

解决方案1
0 2011-07-22 08:44:49

解决方案2
0 2011-07-22 09:04:57

更新选择框选项

问题描述

2 个解决方案

解决方案1 0 2011-07-22 08:44:49

解决方案2 0 2011-07-22 09:04:57

解决方案1
0 2011-07-22 08:44:49

解决方案2
0 2011-07-22 09:04:57