I simply wish to capture the options value at the time of change.
My code works when ran in console as individual lines however even after the function is called the variable listObj and eventValue remain null.
window.onload = function() {
document.getElementById("listSelector").addEventListener("change",
findCarFunc);
alert("Loaded");
}
function findCarFunc() {
alert("you changed");
var listObj = document.getElementById("listSelector");
var eventValue = listObj.value;
}
<select id="listSelector">
<option value="defaultManufactuer" selected = "selected">Manufacturer</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Now the function returns a string however, I wanted to add quotation marks to string as I am going to use it to identify the relevant element IDs.
Can I actually do what I am attempting to below? I feel I may have confused myself,
window.onload = function () {
document.getElementById("listSelector").addEventListener("change", populateContainer);
alert("Loaded");
}
function findCarFunc() {
alert("you changed");
var listObj = document.getElementById("listSelector").value;
console.log(listObj);
}
function populateContainer() {
alert("Container Event Loaded")
//Div to append child on once the function has returned the
//element string.
var target = document.getElementById("target");
//This is where I attempt to capture and manipulate the string by
//concatinating the quote marks onto the .
var str = "'"+findCarFunc()+"'";
console.log(str);
}
You can get the value of the selected option using
var eventValue = listObj.options[listObj.selectedIndex].value;
Edit. I have updated my answer to fit your needs mentioned in comments.
The problem with your code is that your are not returning anything in your findCarFunc(), meaning this function will return undefined by default.
window.onload = function () {
document.getElementById("listSelector").addEventListener("change", populateContainer);
alert("Loaded");
}
function findCarFunc() {
alert("you changed");
var listObj = document.getElementById("listSelector").value;
return listObj;
}
function populateContainer() {
alert("Container Event Loaded")
//Div to append child on once the function has returned the
//element string.
var target = document.getElementById("target");
//This is where I attempt to capture and manipulate the string by
//concatinating the quote marks onto the .
var str = "'"+findCarFunc()+"'";
console.log(str);
}
<select id = "listSelector">
<option value="defaultManufactuer" selected = "selected">Manufacturer</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
window.onload = function () {
document.getElementById("listSelector").addEventListener("change", findCarFunc);
alert("Loaded");
}
function findCarFunc() {
alert("you changed");
var listObj = document.getElementById("listSelector").value;
console.log(listObj);
}
<select id = "listSelector">
<option value="defaultManufactuer" selected = "selected">Manufacturer</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Related
This question already has answers here:
"Variable" variables in JavaScript
(9 answers)
Closed 2 years ago.
There is a very long select-box in my html document. Every option has got an own name.
I want to convert the value-string of the selected option into a javascript-variable.
Or do I have to do it with a switch-case-query?
Example:
var basketball = "changeable-string";
var handball = 760;
var basketball = null;
var baseball = "description: ball-game to play";
function myFunction() {
//Now I want to work with the name of the variable
//I would use switch case, but longer select-boxes would take more code...
//What shall I do?
}
<select name="box" onchange="myFunction();">
<option value="football">Football</option>
<option value="handball">Handball</option>
<option value="basketball">Basketball</option>
<option value="baseball">Baseball</option>
</select>
You can store the data in an object with the keys matching your select's values.
var data = {
basketball: "changeable-string",
handball: 760,
football: null,
baseball: "description: ball-game to play"
}
function myFunction(el) {
console.log(data[el.value])
}
<select name="box" onchange="myFunction(this);">
<option value="football">Football</option>
<option value="handball">Handball</option>
<option value="basketball">Basketball</option>
<option value="baseball">Baseball</option>
</select>
You can select the value by looking at the event.target. To quote the official documentation...
The target property of the Event interface is a reference to the object onto which the event was dispatched. (Source: MDN Web Docs: Event.target)
Since event.target is the element that triggered the event, so looking at its attributes should work (whether you want value or name attribute). You can even make up your own data-attributes...
var basketball = "changeable-string";
var handball = 760;
var basketball = null;
var baseball = "description: ball-game to play";
function myFunction(e) {
//Now I want to work with the name of the variable
//I would use switch case, but longer select-boxes would take more code...
//What shall I do?
console.log("Name: " + e.target.name + "| Value: " + e.target.value + ". Description: " + e.target.selectedOptions[0].dataset.description);
// Here we are using e.target.value to get the value of the element that triggered this event.
}
<select name="box" onchange="myFunction(event);">
<option value="football" data-description="Football is rough!">Football</option>
<option value="handball" data-description="Handball is sly!">Handball</option>
<option value="basketball" data-description="Basketball is agile!">Basketball</option>
<option value="baseball" data-description="Baseball is boring!">Baseball</option>
</select>
In the above example, you can see:
Displaying a select's selected option value.
Displaying a select's name.
Displaying a select's selected option custom, data-attribute.
You can change the value of your select options to 0, 1 2, 3 and also in java script code define an array and add the four variable content to it then return each value from array just by passing option value to index of array.
<select name="box" onchange="myFunction(this);">
<option value="0">Football</option>
<option value="1">Handball</option>
<option value="2">Basketball</option>
<option value="3">Baseball</option>
</select>
var data = ["changeable-string", 760, null, "description: ball-game to play"];
function myFunction(e) {
console.log(data[e.value])
}
or you can define an associative array:
<select name="box" onchange="myFunction(this);">
<option value="football">Football</option>
<option value="handball">Handball</option>
<option value="basketball">Basketball</option>
<option value="baseball">Baseball</option>
</select>
var data = new Object();
data["basketball"] = "changeable-string";
data["handball"] = 760;
data["football"] = null;
data["baseball"] = "description: ball-game to play";
function myFunction(e) {
console.log(data[e.value])
}
You can use getElementById in function and return the result,
function myFunction(id) {
const v = document.getElementById(id).value;
var result;
switch(v){
case "football" :
result = 1; console.log(result);
return result; break;
case "handball" :
result = 2; console.log(result);
return result; break;
case "basketball" :
result = 3; console.log(result);
return result; break;
case "baseball" :
result = 4; console.log(result);
return result; break;
default :
result = "Choose your options!"; console.log(result);
return result; break;
}
console.log(result);
return result;
}
<select id="box" onchange="myFunction(id);">
<option value="default">Choose..</option>
<option value="football">Football</option>
<option value="handball">Handball</option>
<option value="basketball">Basketball</option>
<option value="baseball">Baseball</option>
</select>
I would like to iterate through the selected values from a multiple select box and check them against a string, returning false as soon as a match is not found. First I tried:
var exampleString = "example";
var mySelections = $("#mySelect option:selected");
for (selection in mySelections) {
if (exampleString.indexOf(mySelections[selection].text()) === -1) {
return false;
};
};
This code gives me an error, however: "text is not a function". I am given to understand that this is because using the index gets the option object itself, not wrapped in jQuery, and it is jQuery that provides the text() method.
I tried an alternative version using the each function:
var result = $("#mySelect option:selected").each(function () {
if (exampleString.indexOf($( this ).text()) === -1) {
return false;
}
});
However, I do not understand the result I'm getting. I naively assumed that my variable result would be set to false or true, but it seems to just return the objects being iterated over. Is there any way to access the results of those string comparisons short of creating a global variable that gets set to true or false inside the function?
Edited to add: upon request, here's the relevant html:
<select multiple="" class="filterSelect" id="mySelect" style="display: none;">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
This is what I would do (I'm not a jQuery user any more):
let testStr = "dd";
document.getElementById('sel').addEventListener('change', (e) => {
const values = []
for (let i=0; i<e.target.selectedOptions.length; i++) {
values.push(e.target.selectedOptions[i].value);
}
console.log(!values.includes(testStr));
return !values.includes(testStr);
})
<select id="sel" multiple>
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
<option value="ee">ee</option>
</select>
How do I make 2 select boxes to dismiss each other if they match, by automatically selecting the second option?
I want it instead of "alert" to have a function that automatically changes one option to the second option on one of the select option boxes when they match.
If I can keep the alert and have it automatically change that would be ideal, but I accept if the alert can not be kept.
JavaScript
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(function () {
'use strict';
$('.OBSMatch').on('change', function (event) {
var selectedValue = $(event.currentTarget).val();
var matchedDropdowns = $('.OBSMatch').filter(function (index) {
return $(this).val() === selectedValue;
});
if (matchedDropdowns.length > 1) {
alert("OBS! You cannot use it, because it matches each other!")
}
})
})
});
</script>
HTML
<select name="LangF1" class="OBSMatch">
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>—</option>
<option value="auto">Auto Detect</option>
</select>
<select name="LangF2" class="OBSMatch">
<option value="zh-CN">Chinese (Simplified)</option>
<option value="en">English</option>
<option selected value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>—</option>
<option value="auto">Auto Detect</option>
</select>
Update: I added this update from the complete code because the former good answer is not working correctly because of this button that does Switches the option languages.
<script language="JavaScript">
function getSelectedOption( elem ) {
return elem.options[elem.selectedIndex].value;
}
function setSelectedOption( elem, value ) {
for (let i = 0; i < elem.options.length; i++) {
elem.options[i].selected = value === elem.options[i].value;
}
}
function swapByOptionValue( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = getSelectedOption( elem1 ),
selectedOption2 = getSelectedOption( elem2 );
setSelectedOption( elem1, selectedOption2 );
setSelectedOption( elem2, selectedOption1 );
}
function swapBySelectedIndex( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = elem1.selectedIndex;
elem1.selectedIndex = elem2.selectedIndex;
elem2.selectedIndex = selectedOption1;
}
</script>
<input type="button" id="SwitchLang" onClick="swapByOptionValue('select[name=\'LangF1\']', 'select[name=\'LangF2\']');" value=" Swap ▲▼ Language ">
What you are asking for is an UI which allows the user to put the UI into an illegal state, gives an alert, and attempts to make things legal.
This really doesn't make for a great UI.
If at all possible, the user should be prevented from putting the UI into an illegal state, then there's no need for an alert and no need to correct anything. Such a strategy is eminently possible here.
The basic rules are fairly simple. On change of either select menu :
the other menu's counterpart to this menu's current selection should be disabled.
the other menu's other options should be enabled.
any initially disabled options need to be protected from becoming enabled.
var $menus = $('.OBSMatch').on('change', function(event) {
$menus.not(this).find('option').filter(function(index, opt) {
return opt.value === event.target.value;
}).prop('disabled', true) // disable the other menu's option corresponding to this menu's selection
.siblings().not('._protected').prop('disabled', false); // enable the other menu's options except any that are protected.
});
$menus.find('option').filter(function(index, opt) {
return opt.disabled;
}).addClass('_protected'); // protect any initially disabled options from being enabled
$menus.trigger('change'); // initialize everything
DEMO
"Auto Detect" may need to be handled as a special case - I'm not sure.
Alternatively, for a set of 3+ select menus ...
DEMO
Edit:
The two menu's selections can be switched as follows :
function switch_(selector) {
var $menus = $(selector);
var values = $menus.map(function() {
return this.value;
}).get().reverse(); // reverse() swaps the two values
$menus.each(function(i, menu) {
$(this).val(values[i]); // implement the switch
}).trigger('change'); // re-initialize everything
}
// call
switch_('.OBSMatch');
// so, assuming you have a #switch element :
$('#switch').on('click', function() {
switch_('.OBSMatch');
});
DEMO
The function can't be named switch, which is a javascript reserved word; therefore switch_
Are you looking for something like this?
The key here is, on change:
Get the value of target element
Get the value of the related select
If values match, change the value of target element to the next option
$(window).load(function() {
$(function() {
'use strict';
$('.OBSMatch').on('change', function(event) {
var selectedVal = $(event.currentTarget).val();
var relatedId = $(this).attr('data-related');
var $otherSelect = $('#' + relatedId);
var otherVal = $otherSelect.val();
if (selectedVal === otherVal) {
$(this).val($(this).find('option:selected').next().val());
// alert("OBS! You cannot use it, because it matches each other!");
}
})
})
});
// UPDATE: Added code from updated question to test solution along with rest of code:
function getSelectedOption( elem ) {
return elem.options[elem.selectedIndex].value;
}
function setSelectedOption( elem, value ) {
for (let i = 0; i < elem.options.length; i++) {
elem.options[i].selected = value === elem.options[i].value;
}
}
function swapByOptionValue( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = getSelectedOption( elem1 ),
selectedOption2 = getSelectedOption( elem2 );
setSelectedOption( elem1, selectedOption2 );
setSelectedOption( elem2, selectedOption1 );
}
function swapBySelectedIndex( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = elem1.selectedIndex;
elem1.selectedIndex = elem2.selectedIndex;
elem2.selectedIndex = selectedOption1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="LangF1" class="OBSMatch" data-related="ddl2" id="ddl1">
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="disabled" disabled>—</option>
<option value="auto">Auto Detect</option>
</select>
<select name="LangF2" class="OBSMatch" data-related="ddl1" id="ddl2">
<option value="zh-CN">Chinese (Simplified)</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option selected value="disabled" disabled>—</option>
<option value="auto">Auto Detect</option>
</select>
<!-- UPDATE: Added code from updated question to test solution along with rest of code: -->
<input type="button" id="SwitchLang" onClick="swapByOptionValue('select[name=\'LangF1\']', 'select[name=\'LangF2\']');" value=" Swap ▲▼ Language ">
There are 5 dropdowns having same class 'className'. I have to make sure that the values entered in the dropdowns are not duplicate.
now, I can access the dropdowns in jquery by class like this
$('.className').each(function(){
//my Ques:: code to check if duplicate values are entered by the user
});
My ques is stated inside the comment as "my ques"
You can check if the selected value is the same on the others using val and filter.
Filter:
Reduce the set of matched elements to those that match the selector or
pass the function's test.
Code:
function inputsHaveDuplicateValues() {
var hasDuplicates = false;
$('.className').each(function () {
var inputsWithSameValue = $(this).val();
hasDuplicates = $('.className').not(this).filter(function () {
return $(this).val() === inputsWithSameValue;
}).length > 0;
if (hasDuplicates) return false
});
return hasDuplicates;
}
$('button').click(function () {
alert(inputsHaveDuplicateValues());
})
Demo: http://jsfiddle.net/IrvinDominin/u3czyjt4/
I suppose there are a number of ways to solve this. For example, you can store the values of each combo in an array, and in each iteration, check if it was already stored in the array previously.
var values = [];
$('.className').each(function(element, index){
if (values.indexOf($(this).val()) >= 0) {
//already exists
return false; //break the loop
}
values[index] = $(this).val();
});
You can use the hashtable to check for duplicate entries. Check this fiddle:
http://jsfiddle.net/v025hkjn/
var hashtable = {};
$(".className").each(function () {
if(hashtable[this.text]) {
$(this).remove();
} else {
hashtable[this.text] = this.value;
}
});
for html may be like below
<select>
<option class='className' value="volvo">Volvo</option>
<option class='className' value="saab">Saab</option>
<option class='className' value="mercedes">Mercedes</option>
<option class='className' value="audi">Audi</option>
<option class='className' value="volvo">Volvo</option>
<option class='className' value="volvo">Volvo</option>
<option class='className' value="volvo">Volvo</option>
</select>
var array = []; // push all the values in array
$('.className').each(function(){
// check if the value is in array
if( $.inArray($(this).val(),array) > 0)
console.log('duplicate found ', $(this).val());
else
array.push($(this).val()
// if not insert into array
});
In my HTML, I have a <select> with three <option> elements. I want to use jQuery to check each option's value against a Javascript var. If one matches, I want to set the selected attribute of that option. How would I do that?
Vanilla JavaScript
Using plain old JavaScript:
var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
if (opt.value == val) {
sel.selectedIndex = j;
break;
}
}
}
<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<button id="btn">Select Fish</button>
jQuery
But if you really want to use jQuery:
var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});
var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<button id="btn">Select Fish</button>
jQuery - Using Value Attributes
In case your options have value attributes which differ from their text content and you want to select via text content:
<select id="sel">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
<script>
var val = 'Fish';
$('#sel option:contains(' + val + ')').prop({selected: true});
</script>
Demo
But if you do have the above set up and want to select by value using jQuery, you can do as before:
var val = 3;
$('#sel').val(val);
Modern DOM
For the browsers that support document.querySelector and the HTMLOptionElement::selected property, this is a more succinct way of accomplishing this task:
var val = 3;
document.querySelector('#sel [value="' + val + '"]').selected = true;
Demo
Knockout.js
<select data-bind="value: val">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
<script>
var viewModel = {
val: ko.observable()
};
ko.applyBindings(viewModel);
viewModel.val(3);
</script>
Demo
Polymer
<template id="template" is="dom-bind">
<select value="{{ val }}">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
</template>
<script>
template.val = 3;
</script>
Demo
Angular 2
Note: this has not been updated for the final stable release.
<app id="app">
<select [value]="val">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
</app>
<script>
var App = ng.Component({selector: 'app'})
.View({template: app.innerHTML})
.Class({constructor: function() {}});
ng.bootstrap(App).then(function(app) {
app._hostComponent.instance.val = 3;
});
</script>
Demo
Vue 2
<div id="app">
<select v-model="val">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
val: null,
},
mounted: function() {
this.val = 3;
}
});
</script>
Demo
None of the examples using jquery in here are actually correct as they will leave the select displaying the first entry even though value has been changed.
The right way to select Alaska and have the select show the right item as selected using:
<select id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
With jquery would be:
$('#state').val('AK').change();
You can change the value of the select element, which changes the selected option to the one with that value, using JavaScript:
document.getElementById('sel').value = 'bike';
DEMO
Markup
<select id="my_select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
jQuery
var my_value = 2;
$('#my_select option').each(function(){
var $this = $(this); // cache this jQuery object to avoid overhead
if ($this.val() == my_value) { // if this option's value is equal to our value
$this.prop('selected', true); // select this option
return false; // break the loop, no need to look further
}
});
Demo
I want to change the select element's selected option's both value & textContent (what we see) to 'Mango'.
Simplest code that worked is below:
var newValue1 = 'Mango'
var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;
Hope that helps someone. Best of luck.
Up vote if this helped you.
I used almost all of the answers posted here but not comfortable with that so i dig one step furter and found easy solution that fits my need and feel worth sharing with you guys.
Instead of iteration all over the options or using JQuery you can do using core JS in simple steps:
Example
<select id="org_list">
<option value="23">IBM</option>
<option value="33">DELL</option>
<option value="25">SONY</option>
<option value="29">HP</option>
</select>
So you must know the value of the option to select.
function selectOrganization(id){
org_list=document.getElementById('org_list');
org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}
How to Use?
selectOrganization(25); //this will select SONY from option List
Your comments are welcome. :) AzmatHunzai.
Test this Demo
Selecting Option based on its value
var vals = [2,'c'];
$('option').each(function(){
var $t = $(this);
for (var n=vals.length; n--; )
if ($t.val() == vals[n]){
$t.prop('selected', true);
return;
}
});
Selecting Option based on its text
var vals = ['Two','CCC']; // what we're looking for is different
$('option').each(function(){
var $t = $(this);
for (var n=vals.length; n--; )
if ($t.text() == vals[n]){ // method used is different
$t.prop('selected', true);
return;
}
});
Supporting HTML
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select>
<option value=""></option>
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
</select>
Excellent answers - here's the D3 version for anyone looking:
<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<script>
d3.select('#sel').property('value', 'Fish');
</script>
After a lot of searching I tried #kzh on select list where I only know option inner text not value attribute,
this code based on select answer I used it to change select option according to current page urlon this format
http://www.example.com/index.php?u=Steve
<select id="sel">
<option>Joe</option>
<option>Steve</option>
<option>Jack</option>
</select>
<script>
var val = window.location.href.split('u=')[1]; // to filter ?u= query
var sel = document.getElementById('sel');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {
// search are based on text inside option Attr
if(opt.text == val) {
sel.selectedIndex = j;
break;
}
}
</script>
This will keeps url parameters shown as selected to make it more user friendly and the visitor knows what page or profile he is currently viewing .
You just write the code
var theVal = 1;
$('#variable_id').val(theVal).trigger('change');
I used this after updating a register and changed the state of request via ajax, then I do a query with the new state in the same script and put it in the select tag element new state to update the view.
var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;
I hope this is useful.
selectElement is a html <select> element.
Increment the value:
selectElement.selectedIndex++
Decrement the value:
selectElement.selectedIndex--
var accHos = document.getElementById("accHos");
function showName(obj) {
accHos.selectedIndex = obj.selectedIndex;
}
div {
color: coral;
}
select {
margin-left: 20px;
margin-bottom: 8px;
min-width: 120px;
}
<div>Select Account Number:</div>
<select id="accNos" name="" onchange="showName(this);">
<option value="">Select Account</option>
<option value="">1052021</option>
<option value="">2052021</option>
<option value="">3052021</option>
<option value="">4052021</option>
<option value="">5052021</option>
</select>
<div>Account Holder Name:</div>
<select id="accHos" name="" disabled>
<option value="">--Name--</option>
<option value="">Suhan</option>
<option value="">Cesur</option>
<option value="">Hopper</option>
<option value="">Rachel</option>
<option value="">Arya</option>
</select>
<!-- Just for my referece -->
Slightly neater Vanilla.JS version. Assuming you've already fixed nodeList missing .forEach():
NodeList.prototype.forEach = Array.prototype.forEach
Just:
var requiredValue = 'i-50332a31',
selectBox = document.querySelector('select')
selectBox.childNodes.forEach(function(element, index){
if ( element.value === requiredValue ) {
selectBox.selectedIndex = index
}
})