使用JavaScript清空Select表单元素
我正在创建一个小应用程序,在应用程序的一部分,我正在创建一个下拉选择菜单,其中填充了来自数组的值 我遇到的问题是,当加载表单时,它成功地加载并用数组值填充select选项,但问题是,当我向数组中添加另一个元素并再次调用表单时,它仍将仅加载第一次调用表单时的值 当我按下提交按钮时,如何让选择选项清除其值。以下是所称的代码:使用JavaScript清空Select表单元素,javascript,jquery,forms,dom,Javascript,Jquery,Forms,Dom,我正在创建一个小应用程序,在应用程序的一部分,我正在创建一个下拉选择菜单,其中填充了来自数组的值 我遇到的问题是,当加载表单时,它成功地加载并用数组值填充select选项,但问题是,当我向数组中添加另一个元素并再次调用表单时,它仍将仅加载第一次调用表单时的值 当我按下提交按钮时,如何让选择选项清除其值。以下是所称的代码: <div class="popupForm" id="newRelate_Form" style="display:none"> <form name
<div class="popupForm" id="newRelate_Form" style="display:none">
<form name="relationFormOne">
<script type="text/javascript" language="javascript">
var $selectFrom = $('<select id="mySelect">');
$($selectFrom).attr('id', 'objFrom');
for (var i = 0; i < objectArray.length; i++)
{
var value = objectArray[i].Name;
$('<option>').val(value).text(value).appendTo($selectFrom);
}
$selectFrom.appendTo($("#from_Object"));
var fromVal = document.getElementById("objFrom");
</script>
<button class="closeDOMWindow" onclick="createObj(fromVal.options[fromVal.selectedIndex].text)">Create</button>
</form>
现在,什么javascript代码会清除select选项,以便在再次调用它时,可以使用放入数组中的任何新对象重新填充它
谢谢你的反馈
顺便说一句,弹出表单是指im使用以下jquery插件的事实:
感谢您的反馈。纯JavaScript:
var ob = document.getElementById('selectID');
while (ob.hasChildNodes())
ob.removeChild(ob.firstChild);
jQuery:
$('#mySelect').children().remove()
不要忘记使用$'mySelect'删除先前创建的select标记。删除并运行该函数。首先,添加html的最佳方法是从字符串中写入它:
<form id="relationFormOne">
<script type="text/javascript" language="javascript">
$(function(){
var objectArray = [{Name:'1'},{Name:'2'},{Name:'3'}];
var selectHtml = [];
$('#relationFormOne').append($('<select name="mySelect">'));
$(objectArray).each(function(ix, val){
selectHtml.push('<option>'+val.Name+'</option>');
});
$('select[name=mySelect]').html(selectHtml.join(''));
});
</script>
<input type="button" value="clear" onclick="$('select[name=mySelect]>option').remove()" />
</form>
<form id="relationFormOne">
<script type="text/javascript" language="javascript">
$(function(){
var objectArray = [{Name:'1'},{Name:'2'},{Name:'3'}];
var selectHtml = [];
$('#relationFormOne').append($('<select name="mySelect">'));
$(objectArray).each(function(ix, val){
selectHtml.push('<option>'+val.Name+'</option>');
});
$('select[name=mySelect]').html(selectHtml.join(''));
});
</script>
<input type="button" value="clear" onclick="$('select[name=mySelect]>option').remove()" />
</form>
$('#mySelect>option').remove();