Databases
StackOverflow2013
Postsdbo
PORemembering values of Combo Select drop lists
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORemembering values of Combo Select drop lists
    text
    copied!<p>I have two drop down lists, the second list is dependent on the first. The options of the select element are generated with java script where multi-dimension arrays store the values.</p> <p>The issue that Im having is that, upon loading the user's account page, the drop down options will show the first set of values from the arrays and not the value that was saved by the user. This is misleading because although the correct value is saved in the user's account, it shows default info.</p> <p>Does anyone have a solution for this?</p> <p>This is a sample of the form:</p> <pre><code>&lt;form&gt; &lt;select type="text" name="option1" id="first" value=""&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt; &lt;select type="text" name="option2" id="second" value=""&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt; &lt;/form&gt; </code></pre> <p>Im using a jquery script that identifies the id (#) of the select element and loads the corresponding value for each select option. This is the code:</p> <pre><code>(function($) { $.fn.doubleSelect = function(doubleid, values, options) { options = $.extend({ preselectFirst: null, preselectSecond: null, emptyOption: false, emptyKey: -1, emptyValue: 'Choose...' }, options || {}); var $first = this; var $secondid = "#" + doubleid; var $second = $($secondid); var setValue = function(value) { $second.val(value).change(); }; /** Helper Function to remove childs from second */ var removeValues = function() { $($secondid + " option").remove(); }; /** OnChange Handler */ $(this).change(function() { removeValues(); var $current = this.options[this.selectedIndex].value; if ($current !== '') { $.each(values, function(k, v) { var bestk; if ($current == v.key) { $.each(v.values, function(k, v2) { if (!bestk &amp;&amp; (v.defaultvalue !== null &amp;&amp; v2 == v.defaultvalue)) { bestk = k; } if (options.preselectSecond !== null &amp;&amp; v2 == options.preselectSecond) { bestk = k; } }); $.each(v.values, function(k, v2) { var o = $("&lt;option&gt;").html(k).attr('value', v2); if (options.preselectSecond) { $.each(options.preselectSecond, function(index, selected) { if (v2 == selected) { o.html(k).attr("selected", "selected"); } } ); } if (k === bestk) { o.html(k).attr("selected", "selected"); } o.appendTo($second); }); } }); } else { setValue(options.emptyValue); } }); return this.each(function() { //remove all current items in select boxes $first.children().remove(); $second.children().remove(); // Handle the empty option param if (options.emptyOption) { var oe = $("&lt;option&gt;").html(options.emptyValue).attr('value', options.emptyKey); oe.appendTo($first); } // add all options to first select box $.each(values, function(k, v) { var of = $("&lt;option&gt;").html(k).attr('value', v.key); if (options.preselectFirst !== null &amp;&amp; v.key == options.preselectFirst) { of.html(k).attr("selected", "selected"); } of.appendTo($first); }); if (options.preselectFirst === null) { var $current = this.options[this.selectedIndex].value; if ($current !== '') { $.each(values, function(k, v) { var bestk; if ($current == v.key) { $.each(v.values, function(k, v2) { if (!bestk &amp;&amp; (v.defaultvalue !== null &amp;&amp; v2 == v.defaultvalue)) { bestk = k; } if (options.preselectSecond !== null &amp;&amp; v2 == options.preselectSecond) { bestk = k; } }); $.each(v.values, function(k, v2) { var o = $("&lt;option&gt;").html(k).attr('value', v2); if (k === bestk) { o.html(k).attr("selected", "selected"); } o.appendTo($second); }); } }); } else { setValue(options.emptyValue); } } else { $first.change(); } }); }; })(jQuery); </code></pre> <p>This is a sample of the arrays:</p> <pre><code>$(document).ready(function() { var selectoptions = { "Option Value 1": { "key" : " Option Value 1", "defaultvalue" : 1, "values" : { "Option 1": "Option 1", "Option 2": "Option 2", "Option 3": "Option 3", "Option 4": "Option 4" } }, " Option Value 2": { "key" : " Option Value 2", "defaultvalue" : 2, "values" : { "Option 1": "Option 1", "Option 2": "Option 2", "Option 3": "Option 3" } }, " Option Value 3": { "key" : " Option Value 3", "defaultvalue" : 3, "values" : { "Option 1": "Option 1", "Option 2": "Option 2", "Option 3": "Option 3", "Option 4": "Option 4", "Option 5": "Option 5" } }, }; $('#first').doubleSelect('second', selectoptions); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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