1

I would like to 'toggle' the list of options in a select box.

I have the two sets of options as strings (American states and Canadian Provinces). However, I notice that in the DOM, the select object has no 'innerhtml' property (at least not according to w3schools).

Do I have to go and remove and replace the options one by one? How do I do this?

1
  • 1
    It's "w3schools", not "w3c schools". They have absolutely nothing to do with the World Wide Web Consortium (W3C).
    – Tim Down
    Dec 20, 2010 at 17:09

5 Answers 5

2

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.

2

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'.

1

Why not replace the entire <SELECT>? There are a number of ways to do this. Easiest is to wrap the <SELECT> in a SPAN/DIV and replace its innerHTML.

If you're pulling your lists from an array, you can set the list length to zero, then insert the new elements in a loop.

0

When you say they are held as strings - do you mean that each item is a seperate string or that the list items are one string (i.e. var variable = "<li>item 1</li><li>item 2</li>";)

If the latter, could you not include the <select> tag in the string and use the jQuery replaceWith function?

1
  • The list of items is one string, i.e. <option value='1'>Alabama</option><option value='2'>Alaska</option>...
    – user151841
    Dec 20, 2010 at 16:41
0

Just add a multiple="multiple" attribute to your select tag if you want multiple selection or add size=".." if you want single selection

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.