Develop Reference

set the value of select option dynamically

This is my code. I am trying to set the value of select tag from database. but it's not working as expected. My requiremnet is value='Auto' then 0th index should be selected else 1sst index should be selected. But its not happening that way. can some one help me?
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
<select class="form-control" name="avupdatemode" value="<%= data.updatemode %>" >
<option value="Auto" >Auto Update</option>
<option value="Manual">Manual</option>
</select>
</div>
<script>
var sel= document.getElementById('avupdatemode');
if(document.getElementById('avupdatemode').value =='Auto'){
sel.options.selectedIndex = 0;}
else{
sel.options.selectedIndex = 1;
}
</script>

First there is no id attribute on your select.
Second .value will take the value from the selected option and not the value attribute from the select.
So i've added data-value="sAuto" to the select and then done document.getElementById('avupdatemode').dataset.value == 'Auto'
DEMO
var sel = document.getElementById('avupdatemode');
if (document.getElementById('avupdatemode').dataset.value == 'Auto') {
sel.options.selectedIndex = 0;
} else {
sel.options.selectedIndex = 1;
}
<div class="form-group">
<label class="medium mb-1" for=""> Select Mode of Update </label>
<select class="form-control" id="avupdatemode" name="avupdatemode" data-value="sAuto">
<option value="Auto">Auto Update</option>
<option value="Manual">Manual</option>
</select>
</div>

I am getting my backend data in an array to my ejs page.
So I tried this and it worked:
var sos = <%- JSON.stringify(sos) %>;
I iterated the array and based on the value i set my index for the select option.

Trying to select a value from a drop-down

One Form on the page I am accessing. This form has a dropdown with 3 options. I need to select the third option. Accessing the webpage from a C# program with cefsharp library (embedded web browser).
I can change the displayed text using
document.forms[0].getElementsByClassName('css-0 Select__single-value')[0].innerText="Keep in-play";
but this has not been registered. Have also tried to trigger input and change events but it is still not recognising my selection.
Any suggestions?
Here is the original DOM for the form:
<div class="bet-widget-optional-params">
<div class="bet-params">
<div class="param-wrapper"><span class="param-label"><a class="link" href="https://help.smarkets.com/hc/en-gb/articles/115003946591" target="_blank">Time In Force</a></span>
<div class="param-select">
<div class="css-0 Select custom-select-box Select menu-on-click">
<div class="css-0 Select__control">
<div class="css-0 Select__value-container Select__value-container--has-value">
<div class="css-0 Select__single-value">Default</div><input id="react-select-bet-param-selector-input" readonly="" tabindex="0" class="css-14uuagi" value=""></div>
<div class="css-0 Select__indicators"><span class="css-0 Select__indicator-separator"></span><span aria-hidden="true" class="Select__arrow-zone"><span class="Select__arrow"></span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

In JavaScript you can set the selectedIndex property.
elem.selectedIndex = 2;
Setting -1 will remove any selection, and any positive integer will select that item in the list (0-indexed)... so if you want the 3rd item, just set it to 2.
HTMLSelectElement.selectedIndex docs
The property works as a getter too, so if you want to know which element is selected, you can request it like:
var currentSelectedIndex = elem.selectedIndex;
Full interactive example below:
var selectElem = document.getElementById('select');
var pElem = document.getElementById('p');
var buttonElem = document.getElementById('button');
selectElem.addEventListener('change', function() {
var index = selectElem.selectedIndex;
pElem.innerHTML = 'selectedIndex: ' + index;
});
buttonElem.addEventListener('click', function(){
selectElem.selectedIndex = 2;
});
<p id="p">selectedIndex: 0</p>
<select id="select">
<option selected>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
<option>Option E</option>
</select>
<input type="button" id="button" value="Set it to C (2)"/>

javascript click a value in dropdown list

I have the following code written in HTML:
<table cellspacing="0" cellpadding="0" width="100%" class="HeaderTable">
<tbody><tr>
<td id="dnn_ctr6707_TimeTableView_TdClassesList" class="HeaderClassesCell">
class
<select name="dnn$ctr6707$TimeTableView$ClassesList" onchange="javascript:setTimeout('__doPostBack(\'dnn$ctr6707$TimeTableView$ClassesList\',\'\')', 0)" id="dnn_ctr6707_TimeTableView_ClassesList" class="HeaderClasses">
<option selected="selected" value="14">a</option>
<option value="15">b</option>
<option value="16">c</option>
<option value="17">d</option>
<option value="49">e</option>
<option value="60">f</option>
</select></td>
What i'm trying to do, is programmly click the option 'b' In the console tab. for some reason it doesn't work for me altho it seems good I think.
Here's what I tried:
var x = document.getElementById('dnn_ctr6707_TimeTableView_ClassesList') // this part work
var y = x.options[1].click() // I managed to get the text of the option but I want it to perform click and it doesn't work that way :(
Thank you for your help!

I think what you want to do is set the value of the select instead of clicking on the option.
Try this instead:
document.getElementById('dnn_ctr6707_TimeTableView_ClassesList').value = "15"

Here is some simple code that lets you enter an index into a text field and the pick that index from the <select> element.
var btn = document.querySelector('#select');
var inp = document.querySelector('#inp');
var sel = document.querySelector('#dnn_ctr6707_TimeTableView_ClassesList');
btn.addEventListener('click', function() {
var val = parseInt(inp.value, 10);
sel.selectedIndex = val;
});
class
<select name="dnn$ctr6707$TimeTableView$ClassesList" id="dnn_ctr6707_TimeTableView_ClassesList" class="HeaderClasses">
<option selected="selected" value="14">a</option>
<option value="15">b</option>
<option value="16">c</option>
<option value="17">d</option>
<option value="49">e</option>
<option value="60">f</option>
</select>
<hr/>
<input id="inp" type="text" value="0"/>
<button id="select">Select</button>

I think what your asking is for an event to be activated.
Javascript doesnt have a .click() function i believe.
var x = document.getElementById('dnn_ctr6707_TimeTableView_ClassesList');
var evt = new Event('click');
x.options[1].dispatchEvent(evt);

Select list not firing jquery on selection

I was previously using the following HTML code for a dropdownlist:
<select id="customDropDown" name="mydropdown">
<option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID </option>
<option value="CourseNameFilter" id ="2" class ="choosefilter">Course Name</option>
<option value="ExpiryDateFilter" id ="3" class ="choosefilter">Expiration Date</option>
<option value="AuthorFilter" id ="4" class ="choosefilter">Author</option>
</select>
From this I was using the following JavaScript to deal with the selection from the dropdown:
$(document).ready(function () {
$('.choosefilter').click(function (event) {
var id = event.target.id
var fullPath = '#HttpContext.Current.Request.Url.Scheme://#HttpContext.Current.Request.Url.Host' + '#HttpContext.Current.Request.ApplicationPath';
var urlstring = 'Profile/ActiveCoursesList/' + id;
var path = fullPath.concat(urlstring);
$.get(urlstring, function (data) {
$('#ActiveCourses').html(data);
});
event.cancelBubble = true;
event.returnValue = false;
event.preventDefault();
event.stopPropagation();
});
});
Due to some changes in the design of the select the HTML is now as follows:
<form class="custom">
<label for="customDropdown">You can filter your courses below:</label>
<select style="display:none;" id="customDropdown">
<option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID </option>
<option value="CourseNameFilter" id ="2" class ="choosefilter">Course Name</option>
<option value="ExpiryDateFilter" id ="3" class ="choosefilter">Expiration Date</option>
<option value="AuthorFilter" id ="4" class ="choosefilter">Author</option>
</select>
<div class="custom dropdown open" style="width: 192px;">
Order by:
<ul style="width: 190px;">
<li class="selected">Course ID</li>
<li>Course Name</li>
<li>Expiration Date</li>
<li>Author</li>
</ul>
</div>
</form>
Any ideas as to why my jQuery is no longer firing?

In the new variant your select is actually hidden, because of style="display:none;". So, if you don't show it somewhere and try to click on the li element will not lead to any results. So, I guess that you should use:
$('.dropdown li').on('click', ...
Also, when you use dropdown element you should attach a listener to the change event of the select tag, not click event of its options.
$('#customDropdown').on('change', function() {
var id = $(this).find(":selected").attr("id");
})

Try using
$('#customDropdown').on('change', function(event){ ... }
instead of
$('.choosefilter').click(function(event) { ... }

I see your IDs are different in the second one customDropdown vs customDropDown

Open the html selected list with a button click

I have created a option list in a webpage where I want to open the select list with a button created with a <div> when a option selected from the list then the selected value comes on the div also.
So here I want the javascript attribute to open the list on button click something like this
document.getElementById('selectedlist').open.
any body have suggestion about this?

Take a look at http://code.google.com/p/expandselect/. I think this is what you want.
Then you can open the select like this.
ExpandSelect("myselect_id")

Here is the simple Javascript code to open(toggle) the select box on clicking the button.
<script type="text/javascript">
function expandSelect(id){
var select_flag = document.getElementById('select_flag').value;
if(select_flag==1){
var select_box = document.getElementById(id);
select_box.size = 1;
document.getElementById('select_flag').value = 0;
}else{
var select_box = document.getElementById(id);
select_box.size = select_box.options.length;
document.getElementById('select_flag').value = 1;
}
}
</script>
<button onclick="expandSelect('select_box')"> Toggle Select Box </button>
<div id="container">
<select name="select_box" id="select_box" >
<option value="">Select</option>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option4</option>
<option value="">option5</option>
<option value="">option6</option>
</select>
<input type="hidden" name="select_flag" id="select_flag" value="0">
</div>