Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>To <em>hide</em> them, use the following approach (since IE bug prevents using CSS "display" property setting to "none" on an OPTION):</p> <p>-Store the original list of options in an array</p> <p>-Have a function to build the select #x from an array, slipping previously selected items</p> <p>-Assign an onchange handler for all selects which loops through all later selects and calls this function.</p> <pre><code>var option_value_order = {'volvo', 'saab', 'mercedes'}; var option_display_strings = new Array(); option_display_strings['volvo'] = 'Volvo'; //... // Assume each of the selects' ID value is "select_1", "select_2" instead of "1", "2" function redraw(selectNum) { var selectId = "select_" + selectNum; var s = document.getElementById(selectId); s.options.length = 0; // empty out var next = 0; for (var i = 0; i &lt; option_value_order.length; i++) { var skip = 0; for (var select_index = 0; select_index &lt; selectNum; select_index++) { if (document.getElementById("select_"+select_index).selected == i) skip = 1; if (skip == 0) { var o = option_value_order[i]; s.options[next] = o; // Don't recall how to set value different from option display, // using option_display_strings[o] next++; } } } } var total_selects = 2; function change_later_selects(s) { var select_num = find_number(s.id); "this returns number 2 for "select_2" - homework for (var i = select_num + 1; i &lt;= total_selects; i++) { redraw(i); } } </code></pre> <p>And then the HTML</p> <pre><code>&lt;select id="select_2" onchange="change_later_selects(this);"&gt; &lt;option value="volvo"&gt;Volvo&lt;/option&gt; &lt;option value="saab"&gt;Saab&lt;/option&gt; &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt; &lt;/select&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload