We Keep Coding

Remove all <select> elements after the one that has been selected

I have a list of dynamically generated <selects>s in a form. I need to make it so that if the user decides go back to an earlier <select>, all <select> that come after it will be removed from the page.
My code below will console.log the correct <select> elements to be removed, but if I start removing them, then it stops working. I'm looping using a non-live list, so I'm confused about why it's not working as expected.
HTML:
<form action="#" method="post">
<label for="select1">square 1:</label>
<select name="1" id="select1"></select>
<label for="select2">square 2:</label>
<select name="2" id="select2"></select>
<label for="select3">square 3:</select>
<select name="3" id="select3"></select>
...
</form>
JS (select is the currently selected <select>):
var form = document.getElementsByTagName('form')[0];
var selects = form.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++) {
if (selects[i].name > select.name) {
var eleToRemove = selectsLive[selects[i].getAttribute('name') - 1];
console.log(eleToRemove);
form.removeChild(eleToRemove.previousSibling); // removes label
form.removeChild(eleToRemove);
}
}

It works when it is written correctly
var sel= 2; // for example
var form = document.getElementsByTagName('form')[0];
var selects = form.getElementsByTagName('select');
for (var i = selects.length-1; i >= 0; i--) {
if (+selects[i].name > sel) {
var eleToRemove = selects[i];
console.log(eleToRemove);
form.removeChild(eleToRemove.previousElementSibling); // removes label
form.removeChild(eleToRemove);
}
}

Appending <option> only appending to last element in list

I use querySelectorAll to select 2 select elements. I then append a newly created <option> element to the two <select> elements.
However, for some reason only the last element has the option appended, the first one is ignored for some reason.
Here is my code:
displayLoading() {
let dropdowns = document.querySelectorAll('[data-search-select]');
let loadingOption = document.createElement('option');
loadingOption.innerHTML = 'Loading...';
for(let i = 0; i < dropdowns.length; i++) {
dropdowns[i].disabled = true;
dropdowns[i].innerHTML = '';
dropdowns[i].appendChild(loadingOption);
}
}
This is the HTML:
<div class="formgroup">
<label class="dropdown-search__label">Choose a make:</label>
<select name="dropdown-search__select--make" id="dropdown-search__select--make" data-search-select="make">
</select>
</div>
<div class="formgroup last">
<label class="dropdown-search__label">Choose a model:</label>
<select name="dropdown-search__select--model" id="dropdown-search__select--model" data-search-select="model">
</select>
</div>

You are creating one option element and trying to add it to two different selects. The second time you try to append the element, you grab the only option you have, remove from the current select and place into the new one. You should create two option elements, maybe moving that line into the for loop
Hope this helps :)

Node.appendChild() is not creating a copy.It is moving the existing node .so in your for loop it add option to the first select then moves it to the second and so on .So instead of that create two option elements and append to each select :
displayLoading();
function displayLoading() {
let dropdowns = document.querySelectorAll('[data-search-select]');
for(let i = 0; i < dropdowns.length; i++) {
let loadingOption = document.createElement('option');
loadingOption.innerHTML = 'Loading...';
dropdowns[i].disabled = true;
dropdowns[i].innerHTML = '';
dropdowns[i].appendChild(loadingOption);
}
}
<div class="formgroup">
<label class="dropdown-search__label">Choose a make:</label>
<select name="dropdown-search__select--make" id="dropdown-search__select--make" data-search-select="make">
</select>
</div>
<div class="formgroup last">
<label class="dropdown-search__label">Choose a model:</label>
<select name="dropdown-search__select--model" id="dropdown-search__select--model" data-search-select="model">
</select>
</div>

How to set selectedIndex of select element using display text?

How to set selectedIndex of select element using display text as reference?
Example:
<input id="AnimalToFind" type="text" />
<select id="Animals">
<option value="0">Chicken</option>
<option value="1">Crocodile</option>
<option value="2">Monkey</option>
</select>
<input type="button" onclick="SelectAnimal()" />
<script type="text/javascript">
function SelectAnimal()
{
//Set selected option of Animals based on AnimalToFind value...
}
</script>
Is there any other way to do this without a loop? You know, I'm thinking of a built-in JavaScript code or something. Also, I don't use jQuery...

Try this:
function SelectAnimal() {
var sel = document.getElementById('Animals');
var val = document.getElementById('AnimalToFind').value;
for(var i = 0, j = sel.options.length; i < j; ++i) {
if(sel.options[i].innerHTML === val) {
sel.selectedIndex = i;
break;
}
}
}

<script type="text/javascript">
function SelectAnimal(){
//Set selected option of Animals based on AnimalToFind value...
var animalTofind = document.getElementById('AnimalToFind');
var selection = document.getElementById('Animals');
// select element
for(var i=0;i<selection.options.length;i++){
if (selection.options[i].innerHTML == animalTofind.value) {
selection.selectedIndex = i;
break;
}
}
}
</script>
setting the selectedIndex property of the select tag will choose the correct item. it is a good idea of instead of comparing the two values (options innerHTML && animal value) you can use the indexOf() method or regular expression to select the correct option despite casing or presense of spaces
selection.options[i].innerHTML.indexOf(animalTofind.value) != -1;
or using .match(/regular expression/)

If you want this without loops or jquery you could use the following
This is straight up JavaScript. This works for current web browsers. Given the age of the question I am not sure if this would have worked back in 2011. Please note that using css style selectors is extremely powerful and can help shorten a lot of code.
// Please note that querySelectorAll will return a match for
// for the term...if there is more than one then you will
// have to loop through the returned object
var selectAnimal = function() {
var animals = document.getElementById('animal');
if (animals) {
var x = animals.querySelectorAll('option[value="frog"]');
if (x.length === 1) {
console.log(x[0].index);
animals.selectedIndex = x[0].index;
}
}
}
<html>
<head>
<title>Test without loop or jquery</title>
</head>
<body>
<label>Animal to select
<select id='animal'>
<option value='nothing'></option>
<option value='dog'>dog</option>
<option value='cat'>cat</option>
<option value='mouse'>mouse</option>
<option value='rat'>rat</option>
<option value='frog'>frog</option>
<option value='horse'>horse</option>
</select>
</label>
<button onclick="selectAnimal()">Click to select animal</button>
</body>
</html>
document.getElementById('Animal').querySelectorAll('option[value="searchterm"]');
in the index object you can now do the following:
x[0].index

Try this:
function SelectAnimal()
{
var animals = document.getElementById('Animals');
var animalsToFind = document.getElementById('AnimalToFind');
// get the options length
var len = animals.options.length;
for(i = 0; i < len; i++)
{
// check the current option's text if it's the same with the input box
if (animals.options[i].innerHTML == animalsToFind.value)
{
animals.selectedIndex = i;
break;
}
}
}

You can set the index by this code :
sel.selectedIndex = 0;
but remember a caution in this practice, You would not be able to call the server side onclick method if you select the previous value selected in the drop down..

Add name attribute to your option:
<option value="0" name="Chicken">Chicken</option>
With that you can use the HTMLOptionsCollection.namedItem("Chicken").value to set the value of your select element.

You can use the HTMLOptionsCollection.namedItem()
That means that you have to define your select options to have a name attribute and have the value of the displayed text.
e.g
California

Remove then Re-Add option elements from SELECT menu?

Given the following menu http://jsfiddle.net/pYJPc/ using Javascript, how would I iterate through all options and remove them one by one? then re-add them all. I don't want the select menu itself to be removed at all

Here is one way to do it using Vanilla JavaScript JSFiddle Demo:
Here is the markup HTML:
<select id="myselect">
<option value='none'>--Select a page--</option>
<option value="1">W3Schools</option>
<option value="2">Microsoft</option>
<option value="3">AltaVista</option>
</select>
<br/><br/>
<button value='add' id='addbtn' name='addbtn'>add</button>
<button value='delete' id='deletebtn' name='deletebtn'>delete</button>
Using cloneNode to backup your default select options. The addOption will add the backup back to your select if there is no options and the deleteOption will delete all options in your select tag:
//clone our options to a backup
var myselect = document.getElementById('myselect');
var backup = myselect.cloneNode(true).getElementsByTagName('option');
//add backup back into select
function addOption() {
if (myselect.options.length == 0) {
for (var i = 0; i < backup.length; i++) {
myselect.options.add(backup[i].cloneNode(true));
}
}
}
//delete all option in select
function deleteOption() {
while (myselect.options.length != 0) {
myselect.options.remove(myselect.options.length - 1);
}
}
//attach click event to btns
document.getElementById('addbtn').onclick = addOption;
document.getElementById('deletebtn').onclick = deleteOption;
Turns out in IE cloneNode does not really clone it. So, we'll have to create our own cloneNode, and change the backup to:
var backup = IEcloneNode(myselect).getElementsByTagName('option');
//FOR IE
//Reference http://brooknovak.wordpress.com/2009/08/23/ies-clonenode-doesnt-actually-clone/
function IEcloneNode(node) {
// If the node is a text node, then re-create it rather than clone it
var clone = node.nodeType == 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
// Recurse
var child = node.firstChild;
while(child) {
clone.appendChild(IEcloneNode(child));
child = child.nextSibling;
}
return clone;
}

Your HTML :
<select id="menu" onchange="go()">
<option>--Select a page--</option>
<option value="1">W3Schools</option>
<option value="2">Microsoft</option>
<option value="3">AltaVista</option>
</select>
<input id="remove" type="button" value="remove one" >
<input id="repop" type="button" value="repop">
And your JS with jQuery
var buffer=new Array();
$("#remove").click(function() {
buffer.push($("option:first").get(0));
$("option:first").remove();
});
$("#repop").click(function() {
$("select").append(buffer);
});

With jQuery loaded:
var options = $('#menu').children();
children.remove();
$('#menu').insert(children);
Similarly in different libraries as well.
Without a library, you need a little bit more work :)

Disabling All Form Elements In Selected Div (edited)

I have one large form that is separated into different sections with divs. Each section is within the same form (bigform) and I need to make sure only one section is enabled/editable at a time. And if the user changes sections after entering data into one section, all data would be cleared from the old section before disabling it. The ideal way for me is to have something like this:
<form>
<select name="selector">
<option>Choose Which Div To Enable</option>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</form>
<form name="bigform">
<div id="1">
<input type="text">
<select name="foo">
<option>bar</option>
<option>bar</option>
</select>
</div>
<div id="2">
<input type="text">
<select name="foo">
<option>bar</option>
<option>bar</option>
</select>
</div>
<div id="3">
<input type="text">
<select name="foo">
<option>bar</option>
<option>bar</option>
</select>
</div>
</form>
When the user selects option "Two" in the selector form, all form elements in DIVs 1 and 3 would be disabled. I've searched the web for hours but I cannot find a solution. What's the best method to achieve this?
I found this code online that does "almost" what I want but not quite. It 'toggles' the form elements in the given element (el). What I'm trying to do is sort of the opposite of this.
<form>
<select name="selector" onChange="toggleDisabled(document.getElementByID(this.value))>
<option>Choose Which Div To Enable</option>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</form>
<script>
function toggleDisabled(el){
try {
el.disabled = el.disabled ? false : true;
}
catch(E){}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
</script>

A way to solve it without using a scripting library such as jQuery:
function disableFormFields(container, isDisabled) {
var tagNames = ["INPUT", "SELECT", "TEXTAREA"];
for (var i = 0; i < tagNames.length; i++) {
var elems = container.getElementsByTagName(tagNames[i]);
for (var j = 0; j < elems.length; j++) {
elems[j].disabled = isDisabled;
}
}
}
<select name="selector" onchange="partiallyDisableForm(this)">
<!-- give every option a numeric value! -->
<option value='0'>Choose Which Div To Enable</option>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
function partiallyDisableForm(selector) {
// don't forget to give your form the ID "bigform"
var form = document.getElementById("bigform");
var parts = form.getElementsByTagName("DIV");
for (var i = 0; i < parts.length; i++) {
var part = parts[i];
// give your form parts the ID "formpart_1" through "formpart_3"
if (part.id.match(/^formpart_\d+$/)) {
// you must implement what to do if selector.value is 0
var isDisabled = (part.id != "formpart_" + selector.value);
disableFormFields(part, isDisabled);
}
}
}

When the user selects option "Two" in the selector form, all form elements in DIVs 1 and 3 would be disabled. So when user submits "bigform", only the values inside div 2 would be submitted.
No. the form will always be submitted as a whole, regardless of what elements were disabled in UI.
If you want to submit only one set of form items, create a separate form for each set.

Its not possible to prevent some input elements from submittng, and it might be safer/easier to do the selective saving on the server side, as it would stop erroneous results being saved if JS broke/was compromised.
You could disable the elements not being submitted and maybe change their name attributes to ensure the values weren't used by the server.
You could also assign a name/value to a submit button, and parse this on the server-side. It would be trivial to use Javascript to set a value n the submit button to tell the server side to only the the required buttons.

So you have N sections with id's 1..N, and you want only section i to be active?
If you put it in that wording, I would code it somewhat like this - mind: my jQuery is not that strong, I'm merely pseudo-jQuerying:
function enable( element, sensitive ) {
//recursively disable this node and it's children
element.disabled = !sensitive;
if( element.childNodes ) {
for( var i = 0; i != element.childNodes.length; ++i ) {
enable( element.childNodes[i], sensitive );
}
}
}
// this function should rely on the structure of your document
// it ought to visit all sections that need to be enabled/disabled
function enableSection( i ) {
$("#bigform > div").each( function( index, element ) {
enable( element, index==i );
});
}
$("#sectionselector").change( function( ) {
// find value of active section
var activesection = $("#sectionselector").value; // or the like
enableSection( activesection );
} );