I'm trying to dynamically change the option of a select2 dropdown.
I've searched the forum and have managed to change the selected option, but it is only visible when clicking on the dropdown and seeing the entire list. Apologies in advance for not being the best coder.
function changeSelectOption(designSelVal) //designSelVal = 9
{
var opts = document.getElementById("design").options;
for (var opt, i = 0; opt = opts[i]; i++)
{
if (opt.value == design)
{
document.getElementById("design").selectedIndex = i;
break;
}
}
}
/* this shows as having correctly changed from value 2 to 9 */
<option value="2" >Text Only</option>
<option value="4" >Heart Arrow</option>
<option value="9" selected>Heart</option>
The visible option remains 'Text Only' and not 'Heart', it's as if the select box needs refreshing.
You are missing the if condition :
it should be
if (opt.value == designSelVal)
function changeSelectOption(designSelVal) //designSelVal = 9
{
var opts = document.getElementById("design").options;
for (var opt, i = 0; opt = opts[i]; i++) {
if (opt.value == designSelVal) {
document.getElementById("design").selectedIndex = i;
break;
}
}
}
changeSelectOption(9);
<select id="design">
<option value="2" selected>Text Only</option>
<option value="4">Heart Arrow</option>
<option value="9" >Heart</option>
</select>
Related
I have two select element and I want to show some options in second select based on what user choose at first select.
consider first select have two options : a , b ...
if user choose 'a' from first select :
the second select optiones should be -> c , d ...
and if user choose 'b' from first select :
the second select optiones should be : e , f ...
I have done some coding but the problem is at the start when user doesnt choose any option from first select the second select is always empty(it should show c , d)
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>
If you can save the option values in a lookup object (or JSON):
function setOptions(select, values) {
for (var i = select.length = values.length; i--; )
select[i].innerText = values[i]
}
function value(select) { return select.value || select[0].value } // 1st item by default
var data = { 1: { 1.1: [1.11, 1.12], 1.2: [1.21, 1.22] },
2: { 2.1: [2.11, 2.12], 2.2: [2.21, 2.22], 2.3: [2.31, 2.32, 2.33] } }
s2.onchange = function() { setOptions(s3, data[value(s1)][value(s2)]) }
s1.onchange = function() { setOptions(s2, Object.keys(data[value(s1)])); s2.onchange() }
setOptions(s1, Object.keys(data)); s1.onchange(); // fill the options
<select id=s1 required size=3></select>
<select id=s2 required size=3></select>
<select id=s3 required size=3></select>
This code is based on JavaScript (No need for jQuery)
change Id name and value (x=="desire_value") according to your code
function myFunction() {
var x = document.getElementById("select1").value;
if (x == "3") document.getElementById("select2").style.display = "block";
else document.getElementById("select2").style.display = "none";
}
<select id="select1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
You have to write the functionality outside of onchange(). Try the following:
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
let element = document.getElementById("s1");
let selOption = element.options[element.selectedIndex].value;
if(selOption == 'a'){
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>
Why don't you just put that hard coded...
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="c">c</option>
<option value="d">d</option>
</select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>
One approach to contemplate is populating the dependant dropdowns with all values and use a data attribute for the parent-child relationship. Javascript then clones and removes the options for later insertion.
The functional javascript is now very lean and the dependency relationships are maintained in the DOM.
var s2Clone;
// Doesn't work in older IEs
//CLone the Dependant drop down and hide
document.addEventListener('DOMContentLoaded', function(){
s2Clone = document.getElementById("s2").cloneNode(true);
document.getElementById("s2").innerHTML = "";
}, false);
document.getElementById("s1").onchange = function() {
var selected = this.value;
//Get the nodes with a parent attribute of the selected data
var optionsToInsert = s2Clone.querySelectorAll("[data-parent='" + selected +"']");
//clear existing
var s2 = document.getElementById("s2");
s2.innerHTML = "";
//Add The new options.
for(i = 0; i < optionsToInsert.length; i++)
{
s2.appendChild(optionsToInsert[i]);
}
}
<select id="s1" required>
<option value="">Please select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="a1" data-parent="a">a - 1</option>
<option value="a2" data-parent="a">a - 2</option>
<option value="a3" data-parent="a">a - 3</option>
<option value="b1" data-parent="b">b - 1</option>
<option value="b2" data-parent="b">b - 2</option>
<option value="b3" data-parent="b">b - 3</option>
</select>
I have been trying lately to make a function that on change on the select box it return only the selected option value.
My markup looks like this:
<select id='rangeSelector'>
<option value='custom'>Custom</option>
<option value='7 days'>7 days</option>
<option value='14 days'>14 days</option>
<option value='WTD'>WTD</option>
<option value='MTD'>MTD</option>
<option value='QTD'>QTD</option>
<option value='YTD'>YTD</option>
</select>
and the javascript function:
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
for (var i = 0; i < x.length; i++) {
var newX = x[i].value;
console.log(newX);
}
}, false);
What I am trying to do is when I click on 7 days to return only 7 days.
Don't read the <option>s. Read the <select>.
document.getElementById('rangeSelector').value
Other interesting bits include .selectedIndex and .selectedOptions.
(Of course, as Abhitalks notes in the comments, in your handler, the element getting will already done for you.)
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
console.log(rangeSelector.value);
}, true);
You do not need for loop for that, after firing event "change" rangeSelector.value already have value of chosen element.
so if you wanna add "active" to selected option you can do same:
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
var y = rangeSelector.selectedIndex;
x[y].className = x[y].className + " active";
console.log(rangeSelector.value);
}, true);
but you should remove "active" class from all non-active, by looping them:)
var rangeSelector = document.getElementById('rangeSelector');
rangeSelector.addEventListener('change', function(e) {
var x = rangeSelector.children;
var y = rangeSelector.selectedIndex;
for (var i = 0; i < x.length; i++) {
x[i].className = ""; //or x[i].removeAttribute("class");`
}
x[y].className = x[y].className + " active";
console.log(rangeSelector.value);
}, true);
You could use jQuery for this, example:
$("#rangeSelector").on("change", function() {
var rangeSelect = document.getElementById("rangeSelector");
var value = selectJaar.options[rangeSelect.selectedIndex].value;
return value;
});
This first gets the dropdown, then get the selected value, and return it.
Try simply using this.value:
document.getElementById('rangeSelector').addEventListener('change', function(e) {
alert(this.value);
});
<select id='rangeSelector'>
<option value='custom'>Custom</option>
<option value='7 days'>7 days</option>
<option value='14 days'>14 days</option>
<option value='WTD'>WTD</option>
<option value='MTD'>MTD</option>
<option value='QTD'>QTD</option>
<option value='YTD'>YTD</option>
</select>
I want to create 4 cascading dropdown list JavaScript i came i across this code online but want i want to add the last input on this code and the last input depend on citySelect. Please help i been searching and i only find three cascading dropdown
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
<br>
<br>
<select name="optfour" id="branchSel" size="1">
<option value="" selected="selected">Please select branch first</option>
</select>
</form>
<script>
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
}
</script>
I would go with an out of the box working solution. Much faster and easier to implement.
Such as : http://plugins.krajee.com/dependent-dropdown/demo
Hope this helps!
I have a dropdown that a selection produces another dropdown with values. All of this writes to the database correctly. I can't figure out how to show the current database value (ie the last value submitted) to show up in the 'second' drop down ('first' dropdown works fine in recalling the database information). So when I select 'Masking Available' I would like that to show up when I open the webpage next time.
function configureDropDownLists(main, second) {
var masking1e = new Array('', 'Masking Available');
var permissivemode1e = new Array('', 'Permissive Mode Enabled');
switch (main.value) {
case 'Masking':
document.getElementById(second).options.length = 0;
for (i = 0; i < masking1e.length; i++) {
createOption(document.getElementById(second), masking1e[i], masking1e[i]);
}
break;
case 'Permissive Mode':
document.getElementById(second).options.length = 0;
for (i = 0; i < permissivemode1e.length; i++) {
createOption(document.getElementById(second), permissivemode1e[i], permissivemode1e[i]);
}
break;
default:
document.getElementById(second).options.length = 0;
break;
}
}
function createOption(first, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
first.options.add(opt);
}
<select name="first" id="first" onchange="configureDropDownLists(this,'second')">
<option value="">Please Select Accommodation</option>
<option value="Masking" <?php if ($first== "Masking"){ echo "SELECTED"; } ?>>Masking</option>
<option value="Permissive Mode" <?php if ($first== "Permissive Mode"){ echo "SELECTED"; } ?>>Permissive Mode</option>
</select>
</br>
<select name="second" id="second">
</select>
i have two select object one with begining time and one with ending time.
when i select for example 11:00 in begining time i want that all options before 11:00 in ending time bee disabled 11:15 selected and rest options selectable.
Also i want to say that i am newbie with javascript.
This is part of my HTML code:
<select id="rbaslasaat" onchange="bitissaati(1384581600, 1384586100);">
<option value="1384581600">10:00</option>
<option value="1384582500">10:30</option>
<option value="1384583400">11:00</option>
<option value="1384584300">11:30</option>
<option value="1384585200">12:00</option>
<option value="1384586100">12:30</option>
</select></div>
<select id="rbitirsaat">
<option id="saatb1384581600" value="1384581600" disabled="">10:00</option>
<option id="saatb1384582500" value="1384582500" disabled="">10:30</option>
<option id="saatb1384583400" value="1384583400" disabled="">11:00</option>
<option id="saatb1384584300" value="1384584300" disabled="">11:30</option>
<option id="saatb1384585200" value="1384585200" disabled="">12:00</option>
<option id="saatb1384586100" value="1384586100" disabled="">12:30</option>
</select></div>
and this is my JavaScript function:
function bitissaati(saata, saatb) {
var saata, saatb, saatc, saatca, sec, i;
saatc = document.getElementById('rbaslasaat');
saatca = saatc.options[saatc.selectedIndex].value;
sec = parseInt(saatca) + 900;
for (i = saata; i<= saatb; i + 900) {
if(i <= saatca ) { document.getElementById('saatb'+i).disabled=true; }
else { document.getElementById('saatb'+i).disabled=false; }
}
document.getElementById('saatb'+sec).selected=true;
}
i could not figured out what the problem is.
each time i try function my browser is freezing.
Thank you all for trying to help
get your code fixed:
for ( i = saata; i<= saatb; i += 900) {
edit: removed the var
I'd just do :
function bitissaati(elem) {
var opt = document.getElementById('rbitirsaat').getElementsByTagName('option'),
val = elem.value;
for (i=opt.length; i--;) {
opt[i].disabled = opt[i].value <= val;
}
}
FIDDLE
Replace the loop with this
for (var k = saata; k<= saatb; k += 900) {
if (k <= saatca) {
document.getElementById('saatb'+k).disabled=true;
}
else {
document.getElementById('saatb'+k).disabled=false;
}
}