当前位置：文江博客话题详情

批量替换 select 中的选项 html 字符串？

发布于 2024-10-08 11:32:12 字数 159 浏览 2 评论 0原文

我想“切换”选择框中的选项列表。

我有两组选项作为字符串（美国各州和加拿大各省）。但是，我注意到在 DOM 中，select 对象没有“innerhtml”属性（至少根据 w3schools 没有）。

我必须去把选项一一删除并替换吗？我该怎么做？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

￡噩梦荏苒 2024-10-15 11:32:12

利用 jQuery，我通常会做这样的事情：

var html = '[your html string with all the options elements]';
$('#mySelectId').empty();
$('#mySelectId').append(html);

至于一对一的想法，请确保保留考虑到 DOM 交互普遍缓慢。整个字符串的批量替换将会非常快，但是如果您为 select 中的每个元素操作 DOM，那么预计它会很慢。

Making use of jQuery, I usually do something like this:

var html = '[your html string with all the options elements]';
$('#mySelectId').empty();
$('#mySelectId').append(html);

As for the one-by-one idea, make sure you keep in mind the general slowness of DOM interaction. Wholesale replacement with the entire string is going to be pretty quick, but if you manipulate the DOM for each element in the select then expect it to be slow.

回复收藏 0 原文

蒲公英的约定 2024-10-15 11:32:12

我要做的就是创建两个，每个都在一个 DIV 中；然后隐藏不需要的那个。这消除了对大量 DOM 操作的需要（因为您只在页面加载时执行一次，因此在某些浏览器中泄漏内存的机会更少咳咳），并且更难意外搞砸应用程序状态（艾伯塔省和阿拉巴马州共享相同的代码等等）。

这将是初始页面：

<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select"></div>
<div id="canada_select"></div>

以及随之而来的 JavaScript（为了简洁起见，此处使用了 jQuery）：

$(document).ready(function(){
  // hide both <div> containers on page load
  $('#canada_select').hide();
  $('#usa_select').hide();
  // create and populate both <select> boxes:
  $('#canada_select').append('<select name="province_canada">'
      + '<option value="AL">Alberta</option>'
      + '<option value="BC">British Columbia</option>...'
      + '</select>'
  );
  $('#usa_select').append('<select name="state_usa">'
      + '<option value="AL">Alabama</option>'
      + '<option value="AK">Alaska</option>...'
      + '</select>'
  );
};

// we'll also need handlers to show the correct list, 
//  depending on the selected country
$('#country_usa').click(function(){
  // we want US states
  $('#canada_select').hide();
  $('#usa_select').show();
});    
$('#country_canada').click(function(){
  // we want Canadian provinces
  $('#usa_select').hide();
  $('#canada_select').show();
});

结果应该是：

<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select">
  <select name="state_usa">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    ...
  </select>
</div>
<div id="canada_select">
  <select name="province_canada">
    <option value="AL">Alberta</option>
    <option value="BC">British Columbia</option>
    ...
  </select>
</div>

在后端，处理 state_usa iff country= ='美国';处理province_canada当且仅当country=='加拿大'。

What I would do is create both, each in a DIV; then just hide whichever is not needed. This eliminates the need for heavy DOM manipulation (as you're only doing that once, on page load, there are fewer opportunities to leak memory in certain browsers cough cough), and is harder to accidentally mess up the app state (what with Alberta and Alabama sharing the same code and all that).

This would be the initial page:

<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select"></div>
<div id="canada_select"></div>

and JavaScript to go with it (jQuery used here for brevity):

$(document).ready(function(){
  // hide both <div> containers on page load
  $('#canada_select').hide();
  $('#usa_select').hide();
  // create and populate both <select> boxes:
  $('#canada_select').append('<select name="province_canada">'
      + '<option value="AL">Alberta</option>'
      + '<option value="BC">British Columbia</option>...'
      + '</select>'
  );
  $('#usa_select').append('<select name="state_usa">'
      + '<option value="AL">Alabama</option>'
      + '<option value="AK">Alaska</option>...'
      + '</select>'
  );
};

// we'll also need handlers to show the correct list, 
//  depending on the selected country
$('#country_usa').click(function(){
  // we want US states
  $('#canada_select').hide();
  $('#usa_select').show();
});    
$('#country_canada').click(function(){
  // we want Canadian provinces
  $('#usa_select').hide();
  $('#canada_select').show();
});

This should be the result:

<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select">
  <select name="state_usa">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    ...
  </select>
</div>
<div id="canada_select">
  <select name="province_canada">
    <option value="AL">Alberta</option>
    <option value="BC">British Columbia</option>
    ...
  </select>
</div>

At the backend, process state_usa iff country=='USA'; process province_canada iff country=='Canada'.

回复收藏 0 原文