javascript - 在单击某些事件时动态更改列表框选项

Question

<x:select id="FileType" width="210px">
        <x:option value="JPG">JPG</x:option>
        <x:option value="PNG">PNG</x:option>
        <x:option value="PDF">PDF</x:option>
        <x:option value="TIF">TIF</x:option>
        <x:option value="BMP">BMP</x:option>
</x:select>

现在单击某个按钮，我想更改它的选项，因为它正在这样做。

function fun(){
    $("#FileType").outerHTML = '<x:select  name="FileType" id="FileType"><x:option selected="true" value="JPG">JPG</x:option><x:option value="PNG">PNG</x:option><x:option value="PDF">PDF</x:option><x:option value="TIF">TIF</x:option><x:option value="BMP">BMP</x:option></x:select>';
}

但是$("#FileType").outerHTML不工作，如果我提醒($("#FileType").outerHTML)它给我undefined。

Answer 1

代替

function fun(){
    $("#FileType").outerHTML = '<x:select  name="FileType" id="FileType"><x:option selected="true" value="JPG">JPG</x:option><x:option value="PNG">PNG</x:option><x:option value="PDF">PDF</x:option><x:option value="TIF">TIF</x:option><x:option value="BMP">BMP</x:option></x:select>';
}

尝试这个：

function fun(){
    $("#FileType")[0].outerHTML = '<x:select  name="FileType" id="FileType"><x:option selected="true" value="JPG">JPG</x:option><x:option value="PNG">PNG</x:option><x:option value="PDF">PDF</x:option><x:option value="TIF">TIF</x:option><x:option value="BMP">BMP</x:option></x:select>';
}

注意[0]选择器后面指定找到的第一个元素。

jsFiddle在这里

Answer 2

jQuery 没有 outerHTML 方法，因此您试图在 jQuery 集合上调用 DOM 方法 - 这就是您得到未定义结果的原因。

您需要按照$("#FileType").parent().html(),$("#FileType").replaceWith()或$("#FileType").get(0).outerHTML

Answer 3

尝试这个：

function fun(){
    $("#FileType option").remove();
    $("#FileType").append('<option selected="true" value="JPG">JPG</option><option value="PNG">PNG</option><option value="PDF">PDF</option><option value="TIF">TIF</option><option value="BMP">BMP</option>');
}