We Keep Coding

Find Options text in Dropdown and set selected and change text

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

javascript dropdown list choice dependent on previous selection

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);
}

Select List Based on Function Return Value

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);
}

Javascript to restrict to add the same item more than once to the second listbox

I want to restrict to add the same item more than once to the second listbox, i think i am very close to it . please help
<script type="text/javascript">
function CopyFile() {
var firstListBox = document.getElementById('<%= lstFirstBox.ClientID %>');
var secondListBox = document.getElementById('<%= lstTarget.ClientID %>');
for (var i = 0; i < firstListBox.options.length; i++) {
if (firstListBox.options[i].selected) {
for (var j = 0; j < secondListBox.options.length; j++) {
if (firstListBox.options[i].selected == secondListBox.options[j]) {
alert("Multiple selection will not allow");
}
else {
var newOption = document.createElement("option");
newOption.text = firstListBox.options[i].text;
newOption.value = firstListBox.options[i].value;
secondListBox.options[secondListBox.options.length] = newOption;
firstListBox.options[i].selected = false;
}
}
}
}
return false;
}
</script>

I wrote you an example. Following html page has two selects and one button. If you select an option in the first select and press the button, the option will be copied to the second select, unless it's already there. In the last case, it will alert a message. to try it, copy paste it in a file (for example "test.htm") and open it in a browser.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function tryToCopy() {
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var optionToBeCopied = select1.options[select1.selectedIndex];
var contains = false;
for(var i = 0, ceiling = select2.options.length; i < ceiling; i++) {
if(select2.options[i].value == optionToBeCopied.value) {
contains = true;
break;
}
}
if(contains) {
alert("duplicate options are not allowed.");
} else {
var option = document.createElement("option");
select2.appendChild(option);
option.value = optionToBeCopied.value;
option.text = optionToBeCopied.text;
}
}
</script>
</head>
<body>
<select id="select1">
<option value="" selected="true"></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="select2">
</select>
<input type="button" value="tryToCopy" onclick="tryToCopy()"/>
</body>
</html>

Setting One Drop Down after Selecting from Another

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;
}
}