I have had to go back to the drawing board as my previous js did not work with my new database structure.
I can not figure out how to use JavaScript to populate a dropdown list dependent on the previous dropdown list selections
I have 5 drop down lists in total with the options selected dependent on the previous choices selected.
The issue I have is the dropdown boxes being created do not send their value when using GET on form submission and I am unaware for how to define that value.
Please can someone give me advice on creating these dropdown lists? Google searches are bringing up ideas but not sufficient for anything with more than 2 drop down lists.
thanks
html
<select id="product" name="products" onchange="configureDropDownLists(this,'faulttype')">
<option value="">select</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
</select>
Fault Type:
<select id="faulttype" name="faulttypes" onchange="configureDropDownLists2(this,'faulttype2')">
<option>{blank}</option>
</select>
Fault Type2:
<select id="faulttype2" name="faulttypes2" onchange="configureDropDownLists3(this,'faulttype3')">
<option>{blank}</option>
</select>
Fault Type3:
<select id="faulttype3" name="faulttypes3">
<option>{blank}</option>
</select>
<input type="submit" value="Search">
</fieldset>
js
var test1 = new Array('test5', 'test6', 'test7');
var test2 = new Array('test8', 'test9', 'test10');
var test3 = new Array('test11', 'test12', 'test13');
var test4 = new Array('test14', 'test15', 'test16');
switch (product.value) {
case 'test1':
document.getElementById(faulttype).options.length = 0;
for (i = 0; i < test1.length; i++) {
createOption(document.getElementById(faulttype), test1[i], test1[i]);
}
break;
case 'test2':
document.getElementById(faulttype).options.length = 0;
for (i = 0; i < test2.length; i++) {
createOption(document.getElementById(faulttype), test2[i], test2[i]);
}
break;
case 'test3':
document.getElementById(faulttype).options.length = 0;
for (i = 0; i < test3.length; i++) {
createOption(document.getElementById(faulttype), test3[i], test3[i]);
}
break;
case 'test4':
document.getElementById(faulttype).options.length = 0;
for (i = 0; i < test4.length; i++) {
createOption(document.getElementById(faulttype), test4[i], test4[i]);
}
function configureDropDownLists2(faulttype, faulttype2) {
var test5 = new Array('test15', 'test14');
var test6 = new Array('test16', 'test17');
switch (faulttype.value) {
case 'test5':
document.getElementById(faulttype2).options.length = 0;
for (i = 0; i < test5.length; i++) {
createOption1(document.getElementById(faulttype2), test5[i], test5[i]);
}
break;
case 'test6':
document.getElementById(faulttype2).options.length = 0;
for (i = 0; i < test6.length; i++) {
createOption1(document.getElementById(faulttype2), test6[i], test6[i]);
}
break;
}
function createOption1(ddl, text, value) {
var opt = document.createElement('option');
var ddl = document.getElementById('faulttype2');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
Related
with vanilla javascript I'd like to loop through my dropdown, and change the selected one, and then change the text that is displayed. I have it selecting, but I'm not getting the object name correct to change the optionText? of the item.
var textToFind = 'LdapUsers';
var dd = document.getElementById('membershipProvider');
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectedIndex = i;
i.options.text = "Edgewood Login"; //This is WRONG
break;
}
}
guidance is appreciated.
You can use a querySelector and a selector to access it without a loop.
v = "222";
selProvider = document.querySelector("#membershipProvider option[value='" + v + "']");
if (selProvider) {
selProvider.text = "CHANGED!";
selProvider.selected = true;
}
<select id="membershipProvider">
<option value='111'>AAA</option>
<option value='222'>BBB</option>
</select>
You need to modify the option at that index. Right now you are trying to modify the index itself.
should be:
dd.options[i].text
not
i.options.text
var textToFind = 'LdapUsers';
var dd = document.getElementById('membershipProvider');
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectedIndex = i;
dd.options[i].text = "Edgewood Login"; //This is WRONG
break;
}
}
<select id="membershipProvider">
<option value="cifs">CIFS</option>
<option value="LdapUsers">LdapUsers</option>
<option value="nfs">NFS</option>
<option value="test">Test</option>
</select>
You should use
dd.options[i].text = "Edgewood Login";
just like when checking for its value
Created a multi-select dropdown, when I click on any of the options I have a input field which stores the values in a textbox. When the page reloads- I want to reselect the values in the multi-select drop down. The text box keeps its values so i was hoping to loop through this if i put it in an array.
E.g. Text contains: "cheese,mozarella"
It is important to only check the items that have the value in the textbox
Jquery:
document.getElementById("txt1").value = "cheese,mozarella";
var data = document.getElementById("txt1").value;
var dataarray = data.split(","); //splits values (,)
console.log(dataarray);
var i;
for (i = 0; i < dataarray.length; i++) {
}
HTML:
<input type="text" runat="server" id="txt1" visible="true" value="0" />
<div class="container">
<select id="basic" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
I have a codeply to demonstrate: https://www.codeply.com/go/mCcxCM0vHs
My aim is to get some jquery code to loop through a dataarray variable and check the box if the value exists and tick it.
This function receives a select and a value and will cycle through the select's options, compare to the given value and mark matching options as selected.
function prepopulateOptions(selectElement, value) {
var options = selectElement.options;
for (var i = 0, numberOfOptions = options.length; i < numberOfOptions; i++) {
if (options[i].value == value) {
options[i].selected = true;
}
}
}
This function clears all selected options.
function clearSelect(selectElement) {
var options = selectElement.options;
for (var i = 0, numberOfOptions = options.length; i < numberOfOptions; i++) {
options[i].selected = false;
}
}
Then tweak your script:
var data = "cheese,mozarella",
dataarray = data.split(","),
selectElement = document.getElementById('basic');
// clear select first
clearSelect(selectElement);
for (var i = 0; i < dataarray.length; i++) {
prepopulateOptions(selectElement, dataarray[i]);
}
Check the fiddle
With jQuery this could be rewritten even easier:
https://jsfiddle.net/rtm0n53b/
Use the localStorage and jQuery.
<script type="text/javascript">
function fnLoadOptions(text){
//--clear selection
$('#basic option').prop("selected", false);
//--load selection
text = text||'';
var items = text.split(',');
for(var i in items) {
$('#basic option[value="'+items[i]+'"]').prop("selected", true);
}
if($.fn.multiselect!=null) {
$('#basic').multiselect('refresh'); //--if using the bootstrap multiselect plugin, then refresh it.
}
}
var key = 'checkedOptions';
//--load previous selection
var previousSelection = localStorage.getItem(key);
fnLoadOptions(previousSelection);
$("#txt1").val(previousSelection);
//--bind to new selection
$('#basic').change(function () {
var v = $('#basic').val();
$("#txt1").val(v);
localStorage.setItem(key,v);
});
$('#txt1').bind("keyup change",function () {
fnLoadOptions($(this).val());
});
</script>
here i have a simple 3 select options , like select 1 ,select 2 and select 3 .
on changing select 1 option will reset the values in select 2 and select 3 , and on changing the select 2 values calling another javascript function to reset the values in select 3 .
the problem here is first select 1 is working fine and displaying select 2 values correctly upon selecting the value from select2 is not selecting always showing the one value.
if i remove the javascript onchange call from select 2 then its working fine.
sample code below .
function L1Change() {
var obj = document.getElementById("L1");
objVal = obj.options[obj.options.selectedIndex].value;
var obj2 = document.getElementById("L2");
obj2.options.length = 0;
obj2.options[0] = new option("op33","1");
obj2.options[0].selected = "true";
if (objVal == 1) {
obj2.options[1] = new option("op34","2");
obj2.options[2] = new option("op35","3");
}
if (objVal == 2) {
obj2.options[1] = new option("op44","2");
obj2.options[2] = new option("op45","3");
}
}
<select name="L1" id="I1" onChange="javascript:L1Change()">
<option selected="selected" value="1">op1</option>
<option value="2">op2</option>
<option value="3">op3</option>
</select>
<select name="L2" id="I2" onChange="javascript:L2Change()">
<option selected="selected" value="1">op11</option>
<option value="2">op12</option>
<option value="3">op13</option>
</select>
from the above code if i removed on change function from select2 values in select2 is working properly .
any one give me an idea how to fix this issue .
Thanks.
<!DOCTYPE html>
<html>
<head>
<script>
function configureDropDownLists(ddl1,ddl2) {
var Customer = new Array('Customer1', 'Customer2', 'Customer3');
var Script = new Array('Script1', 'Script2', 'Script3');
var etc = new Array('etc1', 'etc2', 'etc3');
var cust1 = new Array('cust11', 'cust12', 'cust13');
var cust2 = new Array('cust21', 'cust22', 'cust23');
var cust3 = new Array('cust31', 'cust32', 'cust33');
switch (ddl1.value) {
case 'Customer':
ddl2.options.length = 0;
for (i = 0; i < Customer.length; i++) {
createOption(ddl2, Customer[i], Customer[i]);
}
break;
case 'Script':
ddl2.options.length = 0;
for (i = 0; i < Script.length; i++) {
createOption(ddl2, Script[i], Script[i]);
}
break;
case 'etc':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, etc[i], etc[i]);
}
break;
case 'Customer1':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust1[i], cust1[i]);
}
break;
case 'Customer2':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust2[i], cust2[i]);
}
break;
case 'Customer3':
ddl2.options.length = 0;
for (i = 0; i < etc.length; i++) {
createOption(ddl2, cust3[i], cust3[i]);
}
break;
default:
ddl2.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
</head>
<body>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Customer">Customer</option>
<option value="Script">Script</option>
<option value="etc">etc</option>
</select>
<select id="ddl2" onchange="configureDropDownLists(this,document.getElementById('ddl3'))">
</select>
<select id="ddl3">
</select>
</body>
</html>
I have a function which will return max value for me. In my view I have select list which i want to show options from 1 - maxvalue . How can I implement this
thanks
function getmatch_value(){
for (i=1;i<=7;i++){
var left = $('#lc'+i).val();
var right = $('#rc'+i).val();
if(isblank(left) || isblank(right) ){
var maxval = i-1;
return maxval;
break;
}
}
}
and i my view I have
<select id="match_ans2" name="mathRowAnswer[]" class="select" style="width: 150px;">
<option value='0'>Select Answer</option>
I want options based on my getmatch_value() so that if It will return 3 to me then the options list automatically have 1 2 and 3 options
var selectList = document.getElementById('match_ans2');
for (var i = 1; i <= getmatch_value(); i++) {
var opt = document.createElement('option');
opt.value = i;
opt.appendChild(document.createTextNode(i.toString()));
selectList.appendChild(opt);
}
I have a couple select elements:
<select name="empID" onchange='setSupervisor(this);'>
<option value="111" sid="222">Eric Employee</option>
...
</select>
<select name="supervisorID">
<option value="333">Susie Supervisor</option>
<option value="222">Stan Supervisor</option>
</select>
And a javascript function:
function setSupervisor(sender)
{
??
}
How can I set the supervisor dropdown after the user selects from the employee dropdown? The tricky part here (at least to me) is having to use a custom sid and not the value from the employee dropdown.
function setSupervisor(sender) {
var selectedOption = sender.getElementsByTagName("option")[sender.selectedIndex];
var sid = selectedOption.getAttribute("sid");
var supervisorSelect = document.getElementsByName("supervisorID")[0];
for (var i = 0, len = supervisorSelect.options.length, option; i < len; ++i) {
option = supervisorSelect.options[i];
if (option.value == sid) {
option.selected = true;
return;
}
}
}
Try this:
var empID = document.getElementsByName("empID").item(0);
var supervisorID = document.getElementsByName("supervisorID").item(0); //This becomes a bit easier if you set an ID as well as a name in your HTML
var index = empID.selectedIndex;
var sid = empID.options[index].getAttribute("sid");
for(var i=0; i<supervisorID.options.length; i++)
{
if(supervisorID.options[i].value == sid)
{
supervisorID.selectedIndex = i;
break;
}
}