如何将选择框的内容存储到变量中？

Question

我的 HTML 页面上有一个 字段，其中填充了一些选项。在 AJAX 的帮助下，我用更合适的选项替换了选择字段中的这些选项。

如何将选择字段的选项存储到变量中，然后再次将其加载到选择中？在某些情况下，能够恢复选择字段的默认选项会很有帮助。

Answer 1

var $default_opts = $('#mySelect').children();

我在这里使用了 jQuery 的 .children() 来保持它更多一点如果您使用 元素，则为通用。

当需要恢复到原始内容时，您可以执行以下操作：

$('#mySelect').empty().append( $default_opts.clone() );

这会清空 的当前内容，并附加默认值的克隆，以便您的副本保留在它的原始状态。

Answer 2

如果您想恢复对象而不是 html() 字符串，可以使用 detach()

//remove options from select and hold them inside a variable
var defaults=$('select option').detach();

//clear select and restore the defaults
$('select').empty().append(defaults);

如何将其与 replaceWith() 一起使用的示例：

<select id="target" size="3">
 <option>a
 <option>b
</select>
<input type="button" 
   value="replace"
   onclick="fx($('#target'),this)"
   />

<script  type='text/javascript'>
function fx(o,b)
{
 if(b.value==='replace')
 {
  o.data('defaults',$('option',o).replaceWith('<option>1</option><option>2</option>'));
  $(b).val('restore');
 }
 else
 {
  $(o).empty().append($(o).data('defaults'));
  $(b).val('replace');
 }
}
</script>

http://jsfiddle.net/doktormolle/Sgn72/

Answer 3

我的方法是使用 jQuery 的 .data 函数来存储选项 html。

select_box = $("#select-box");
select_box.data("orginal_options", select_box.html());
select_box.html("<option value='1'>New Option</option>");

回复：

select_box.html(select_box.data("original_options"));

当然这些都是基本的想法，我不太清楚你的逻辑是怎样的。 （如果我错了，请纠正我）。