i got html form 2 selectbox, 1 design , 1 color. need color options display selected design options, in addition need sanitize color options text. , important thing - html shouldn't changed. managed it, it's work once. coloroption innettext keep changing although i'm pushing elements array.
html
<form action="index.html" method="post"> <div> <label for="design">design:</label> <select id="design" name="user_design"> <option>select theme</option> <option value="js puns">theme - js puns</option> <option value="heart js">theme - ♥ js</option> </select> </div> <div id="colors-js-puns" class=""> <label for="color">color:</label> <select id="color"> <option value="cornflowerblue">cornflower blue (js puns shirt only)</option> <option value="darkslategrey">dark slate grey (js puns shirt only)</option> <option value="gold">gold (js puns shirt only)</option> <option value="tomato">tomato (i ♥ js shirt only)</option> <option value="steelblue">steel blue (i ♥ js shirt only)</option> <option value="dimgrey">dim grey (i ♥ js shirt only)</option> </select> </div> </form> js
var sanitizestr = function(str) { var regex = /\(+.+\)/; var substr = str.match(regex); str = str.replace(' ' + substr, ''); return str; }; var gettshirtdesign = function() { var design = document.getelementbyid('design'); var colordiv = document.getelementbyid('colors-js-puns'); var color = document.getelementbyid('color'); var coloroptions = document.queryselectorall('#color option'); var display; // hide color label , select colordiv.style.display = 'none'; console.log(coloroptions); design.onchange = function() { console.log(coloroptions); display = []; color.innerhtml = ''; if (this.value === 'select theme') { colordiv.style.display = 'none'; } else { colordiv.style.display = 'block'; // finds coloroptions elements contains part of selected option text , push them display (var = 0; < coloroptions.length; i++) { if (coloroptions[i].innertext.indexof(this.selectedoptions[0].text.substr(8)) > -1) { display.push(coloroptions[i]); } } // sanitize innertext of display elements , append them color (i = 0; < display.length; i++) { display[i].innertext = sanitizestr(display[i].innertext); color.appendchild(display[i]); } } }; }; gettshirtdesign();
the main issue here fact color div innerhtml being wiped on change. lose full data list of colors when happens. got around issue manually specifying new coloroptionsvalues object , populating color select boxes that. see snippet:
var sanitizestr = function(str) { var regex = /\(+.+\)/; var substr = str.match(regex); str = str.replace(' ' + substr, ''); return str; }; var coloroptionsvalues = { "cornflowerblue" : "cornflower blue (js puns shirt only)", "darkslategrey" : "dark slate grey (js puns shirt only)", "gold" : "gold (js puns shirt only)", "tomato" : "tomato (i ♥ js shirt only)", "steelblue" : "steel blue (i ♥ js shirt only)", "dimgrey" : "dim grey (i ♥ js shirt only)" }; var gettshirtdesign = function() { var design = document.getelementbyid('design'); var colordiv = document.getelementbyid('colors-js-puns'); var color = document.getelementbyid('color'); var coloroptions = document.queryselectorall('#color option'); var display; // hide color label , select colordiv.style.display = 'none'; design.onchange = function() { display = []; color.innerhtml = ''; if (this.value === 'select theme') { colordiv.style.display = 'none'; } else { colordiv.style.display = 'block'; // finds coloroptions elements contains part of selected option text , push them display (var key in coloroptionsvalues) { if (coloroptionsvalues.hasownproperty(key)) { if (coloroptionsvalues[key].indexof(this.selectedoptions[0].text.substr(8)) > -1) { display.push(key); } } } //console.log(display); // sanitize innertext of display elements , append them color (i = 0; < display.length; i++) { var sanitizedvalue = sanitizestr(coloroptionsvalues[display[i]]); var optionnode = document.createelement("option"); optionnode.value = display[i]; optionnode.text = sanitizedvalue; color.appendchild(optionnode); } } }; }; gettshirtdesign();<form action="index.html" method="post"> <div> <label for="design">design:</label> <select id="design" name="user_design"> <option>select theme</option> <option value="js puns">theme - js puns</option> <option value="heart js">theme - ♥ js</option> </select> </div> <div id="colors-js-puns" class=""> <label for="color">color:</label> <select id="color"> <option value="cornflowerblue">cornflower blue (js puns shirt only)</option> <option value="darkslategrey">dark slate grey (js puns shirt only)</option> <option value="gold">gold (js puns shirt only)</option> <option value="tomato">tomato (i ♥ js shirt only)</option> <option value="steelblue">steel blue (i ♥ js shirt only)</option> <option value="dimgrey">dim grey (i ♥ js shirt only)</option> </select> </div> </form>option 2
var sanitizestr = function(str) { var regex = /\(+.+\)/; var substr = str.match(regex); str = str.replace(' ' + substr, ''); return str; }; var coloroptions = document.queryselectorall('#color option'); var coloroptionsvalues = {}; function initializecolors(){ (i = 0; < coloroptions.length; ++i) { coloroptionsvalues[coloroptions[i].value] = coloroptions[i].text; } } var gettshirtdesign = function() { var design = document.getelementbyid('design'); var colordiv = document.getelementbyid('colors-js-puns'); var color = document.getelementbyid('color'); var display; // hide color label , select colordiv.style.display = 'none'; design.onchange = function() { display = []; color.innerhtml = ''; if (this.value === 'select theme') { colordiv.style.display = 'none'; } else { colordiv.style.display = 'block'; // finds coloroptions elements contains part of selected option text , push them display (var key in coloroptionsvalues) { if (coloroptionsvalues.hasownproperty(key)) { if (coloroptionsvalues[key].indexof(this.selectedoptions[0].text.substr(8)) > -1) { display.push(key); } } } //console.log(display); // sanitize innertext of display elements , append them color (i = 0; < display.length; i++) { var sanitizedvalue = sanitizestr(coloroptionsvalues[display[i]]); var optionnode = document.createelement("option"); optionnode.value = display[i]; optionnode.text = sanitizedvalue; color.appendchild(optionnode); } } }; }; initializecolors(); gettshirtdesign();<form action="index.html" method="post"> <div> <label for="design">design:</label> <select id="design" name="user_design"> <option>select theme</option> <option value="js puns">theme - js puns</option> <option value="heart js">theme - ♥ js</option> </select> </div> <div id="colors-js-puns" class=""> <label for="color">color:</label> <select id="color"> <option value="cornflowerblue">cornflower blue (js puns shirt only)</option> <option value="darkslategrey">dark slate grey (js puns shirt only)</option> <option value="gold">gold (js puns shirt only)</option> <option value="tomato">tomato (i ♥ js shirt only)</option> <option value="steelblue">steel blue (i ♥ js shirt only)</option> <option value="dimgrey">dim grey (i ♥ js shirt only)</option> </select> </div> </form>
Comments
Post a Comment