使用 JavaScript 清空选择表单元素
Emptying A Select Form Element With JavaScript
我正在创建一个小应用程序,在应用程序的一部分上,我正在创建一个下拉选择菜单,该菜单填充了数组中的值。
我遇到的问题是,当加载表单时,它成功地加载并使用数组值填充选择选项,但问题是当我向数组添加另一个元素并再次调用表单时,它仍然只会加载首次调用表单时的值。
当我按下提交按钮时,我如何让选择选项清除其值。这是调用的代码:
<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>
然后将该值传递给函数 createObj():
function createObj()
{
/*
DO THE WORK NEEDED
*/
}
现在,什么javascript代码会清除选择选项,以便在再次调用它时可以使用放置在数组中的任何新对象重新填充它?
感谢您的任何反馈。
顺便说一句,弹出表单是指IM使用以下jquery插件的事实:DOM窗口
感谢您的任何反馈。
Plain JavaScript:
var ob = document.getElementById('selectID');
while (ob.hasChildNodes())
ob.removeChild(ob.firstChild);
j查询:
$('#mySelect').children().remove()
不要忘记使用 $('#mySelect').remove()
删除之前创建的 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>
当您想要清除选择时,只需使用如下所示的代码:
$('#mySelect>option').remove();
相关文章:
- Javascript更新孙窗口中的表单元素
- 阻止表单元素提交
- 使用带有.net autopostback的ryanfait.com自定义表单元素
- 使用javascript更改表单元素的ID值
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 为什么表单元素不应命名为submit
- 如何重置搜索表单中的特定表单元素
- 使用 ng-repeat访问 ng 表单元素/值
- 获取电子邮件附件的表单元素
- AJAX和php脚本后添加的表单元素未传输到$_POST
- 如何对未知表单元素进行表单验证
- 不显示为表单元素的图像输入按钮的动态创建和appendChild
- 在JavaScript中为表单元素生成键值对
- 表单元素上的jQuery focusout事件即使在单击子元素时也会被触发
- 如何在 OnKeyPress 事件后获取输入表单元素的值
- 表单元素值更改后的角度 JS 验证
- 使用 javascript 中的表单元素构建一个 xml 字符串
- 如何以角度访问表单元素的$valid
- 如果选择了多个选项,则使用 jQuery 显示隐藏的表单元素
- JSON 填充的表单元素不使用 angularJs 过滤器进行过滤