19822

Building a dynamic dropdown in javascript

Question:

I have 16 uniquely named dropdowns on a web page. When the page loads, the user has the option on any of the dropdowns to select a value of 0 to 16. 0 is the default on all of them. Now, unless the value is 0, when a user selects a value for one of the dropdowns. I want that value to not be an available option for any of the other dropdowns. This continues until you get to the last dropdown where the only options are the last available number and zero. The issue is, it works fine in Chrome and FireFox, but I can't get it to work correctly in IE. Of course, the majority of the users of the page use IE. The workaround being that all values are always available on all dropdowns, and the javascript checks the values on form post.

I attached the code for the function that does the heavy lifting, this function gets called by an onchange event on each of the dropdowns.

function populatePoints(pointChosen){ for (var k=1; k< 17; k++){ pointValue = document.myform["Dropdown_" + k + "_Points"].value var theDropDown = document.myform["Dropdown_" + k + "_Points"].options theDropDown.remove var x = 0 document.fbpool["Dropdown_" + k + "_Points"].options[x] = new Option(0) x++ for (var i=1;i<17;i++) { if (document.myform.Dropdown_1_Points.value != i && document.myform.Dropdown_2_Points.value != i && document.myform.Dropdown_3_Points.value != i && document.myform.Dropdown_4_Points.value != i && document.myform.Dropdown_5_Points.value != i && document.myform.Dropdown_6_Points.value != i && document.myform.Dropdown_7_Points.value != i && document.myform.Dropdown_8_Points.value != i && document.myform.Dropdown_9_Points.value != i && document.myform.Dropdown_10_Points.value != i && document.myform.Dropdown_11_Points.value != i && document.myform.Dropdown_12_Points.value != i && document.myform.Dropdown_13_Points.value != i && document.myform.Dropdown_14_Points.value != i && document.myform.Dropdown_16_Points.value != i && document.myform.Dropdown_15_Points.value != i){ document.myform["Dropdown_" + k + "_Points"].options[x] = new Option(i) x++} } document.myform["Dropdown_" + k + "_Points"].value = pointValue } }

Answer1:

If you want to try a different way, this should work for you. As a bonus, you can have as many selects as you need in the page.

<strong>Edited:</strong> Fixed if conditional with the OP's help.

function matchValue(collection, value) { // We need this to look for a certain value // in a collection of values because IE < 9 // doesn't support .indexOf(). for (var i = 0; i < collection.length; i++) { if (collection[i] == value) { return true; } } return false; } function populatePoints(pointChosen) { // Grab all your selects. var sels = document.querySelectorAll('select'); // The number of selects returned by the query. var count = sels.length; // Value of the select changed. var pointChosenVal = pointChosen.value; // Array to keep the current values for all selects. var chosenValues = [count]; for (var i = 0; i < count; i++) { // Keeping the current values. chosenValues[i] = sels[i].value; } for (var i = 0; i < count; i++) { // The current value of this select. var thisSelVal = sels[i].value; // Remove all its options. sels[i].options.length = 0; // As our selects have an extra option (value = 0), // and considering that the number of options = number of selects, // we increase the count by 1. for (var k = 0; k <= count; k++) { if (k == 0 || (sels[i] == pointChosen && pointChosenVal != 0) || ((sels[i] != pointChosen || pointChosenVal == 0) && (k == thisSelVal || !matchValue(chosenValues, k)))) { var opt = document.createElement('option'); opt.value = k; opt.text = k.toString(); opt.selected = (k == thisSelVal); sels[i].add(opt); } } } }

<strong>Note:</strong> I've attached the change event handler to the selects like this:

onchange="populatePoints(this)"

<a href="http://jsfiddle.net/MelanciaUK/gudxsu3y/11/" rel="nofollow">Demo</a>

Recommend

  • Can Django use “external” python scripts linked to other libraries (NumPy, RPy2…)
  • Why is parser combinator “seq” defined with “bind” and “return”?
  • python pandas- AttributeError: 'Series' object has no attribute 'columns'?
  • State management in ReactJS
  • How to truncate data in a hash so that the resulting JSON isn't longer than n bytes?
  • Laravel Eloquent - Do not run relationship query if column value is NULL or 0
  • Where Federation authentication token is saved [WIF STS]?
  • Why my input is showing one thread executing after another thread, not at the same time?
  • C++ Container performance question
  • IE7 stops making network requests after a while
  • Optimizing Memory in Android when managing Fragment Transactions
  • Client JS + Django Rest Framework
  • How does NodeAPI in Google Play Services work?
  • Is there ever a reason to use is versus as? [duplicate]
  • How to upload excel file in angular js?
  • How to show different validation messages for email validation in Angular2 using Validators class?
  • check if numbers have the same sign
  • How do I unit test for machine specific behaviour?
  • Control a pager (like the less program) from an extenal (parent) script
  • Html select multiple get all values at onchange event
  • NodeJS - Disable JSONP on specific routes
  • Check all commands exit code within a bash script
  • How to count amount of elements in a row of a matrix in C
  • XSLT foreach repeating nodes to flat
  • Does Apple allow the usage of sysctl.h within iOS applications?
  • Validate child input components on submit with Vee-Validate and vue js 2
  • How to add git credentials to the build so it would be able to be used within a shell code?
  • JQuery Internet Explorer and ajaxstop
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • jQuery tmpl and DataLink beta
  • Why winpcap requires both .lib and .dll to run?
  • SQL merge duplicate rows and join values that are different
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • Linking SubReports Without LinkChild/LinkMaster
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • unknown Exception android
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?