Develop Reference

Set select option by index

I have a dynamically generated dropdown select feature that numerically pages through a book. I wish to create a table of content feature that allows users to click a link to jump to pages within the book. I've implemented a vanilla javascript solution (see below) that selects by index BUT the update isn't triggered (page number changes in the pager but it doesn't advance the page).
I welcome a way to make the javascript change trigger or a jquery solution. Thanks!
function selectOption(index) {
document.getElementById("tei_pager").options.selectedIndex = index;
}
<select id="tei_pager" class="form-select">
<option value="10917">1</option>
<option value="10918">2</option>
<option value="10919">3</option>
</select>
Second Page
and this section of a separate jquery is binding the select
// Bind page changes to the select.
$("#tei_pager").change(function () {
Drupal.settings.islandora_paged_tei_seadragon_update_page(
$(this).val(),
$(this).children("option:selected").text()
);
});

I adapted a solution from here: Change <select>'s option and trigger events with JavaScript
Having the selection made by js rather than a mouseclick was inhibiting the process.
My solution looks like:
js
function selectOption(index){
if (index == 0) {
document.getElementById("tei_pager").options.selectedIndex = index;
}
else {
document.getElementById("tei_pager").options.selectedIndex = (index - 1);
}
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.getElementById("tei_pager").dispatchEvent(evt);
}
else {
document.getElementById("tei_pager").fireEvent("onchange");
}
}
html
<select id="tei_pager" class="form-select">
<option value="10917" selected="selected">1</option>
<option value="10918">2</option>
<option value="10919">3</option>
<option value="10920">4</option>
<option value="10921">5</option>
<option value="11192">6</option>
<option value="11193">7</option>
</select>
First Page
Sixth Page

You can set the value of the select tag.
function selectOption(val) {
document.getElementById("tei_pager").value = val;
}
<select id="tei_pager" class="form-select">
<option value="10917">1</option>
<option value="10918">2</option>
<option value="10919">3</option>
</select>
Second Page

If the change event of the select element is to trigger the Drupal code you have at the end of your question,
then change:
$("#islandora_paged_tei_seadragon_pager").change(function () { ....
to:
$("#tei_pager").change(function () { ....
UPDATE
If by ....dynamically generated dropdown select.... you mean to say that the select element is created after DOM ready event, then consider re-writing it as follows:
$(document).on('change', '#tei_pager', function () { ....

Want to make something like conditional select options in a HTML Form

I want to make a form in which the next field appears based on input done in the previous field by the user.
eg: If The user selects Beverages then below it show a fieldset with different beverages with checkbox, and if user select snacks then below it show fieldset with snacks items
I was trying it to do like this:
<select id="first-choice">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<br>
<select id="second-choice">
<option>Please choose from above</option>
</select>
JSON Data
{
"beverages": "Coffee,Coke",
"snacks": "Chips,Cookies"
}
Jquery
$("#first-choice").change(function() {
var $dropdown = $(this);
$.getJSON("jsondata/data.json", function(data) {
var key = $dropdown.val();
var vals = [];
switch(key) {
case 'beverages':
vals = data.beverages.split(",");
break;
case 'snacks':
vals = data.snacks.split(",");
break;
case 'base':
vals = ['Please choose from above'];
}
var $secondChoice = $("#second-choice");
$secondChoice.empty();
$.each(vals, function(index, value) {
$secondChoice.append("<option>" + value + "</option>");
});
});
});
I not only want append select option, I actually want to make a new division with text fields and file uploads etc
just guide me how to do it in a compact/dynamic way

By all means keep the JS that fills the selector elements (but make your options map a thing that's known before the user even gets to pick anything: don't rely on a network transfer for that!), but don't try to get the whole "conditional showing" to work in JS: CSS can already do that, and it'll do it better. You just need to remember to use the correct HTML markup:
// Load this script via src="..." with `async` and `defer` attributes
// so that it'll run before the user gets to interact with the page,
// after the DOM has been constructed. A feature that's been available
// since IE11, so there's no reason to still put scripts at the end of
// the page, or listening for DOMContentLoaded/ready events.
const first = document.getElementsByName('first-value')[0];
const second = document.getElementsByName('second-value')[0];
const initial = second.innerHTML;
// Either hard code this, or get it on page load, just make sure
// it's already available before users start picking values!
const optionMap = {
a: ['i', 'j', 'k'],
b: ['u', 'v', 'w'],
c: ['x', 'y', 'z'],
};
function addOption(selectElement, text) {
let option = document.createElement('option');
option.value = text;
option.textContent = text;
selectElement.append(option);
}
// Fill the first selector
Object.keys(optionMap).forEach(text => addOption(first, text));
// And only fill the second selector when we know the first value
first.addEventListener('change', evt => {
second.innerHTML = initial;
optionMap[evt.target.value].forEach(text => addOption(second, text));
});
select:not(:valid) {
border: 1px solid red;
}
select:not(:valid) + .followup {
display: none;
}
<select required name="first-value">
<option disabled selected>please select one</option>
</select>
<select required class="followup" name="second-value">
<option disabled selected>please select one more</option>
</select>
The trick here is to make sure you have an option that is both disabled and selected. The latter because <select> elements always have an option selected, but any option marked as disabled does not count as a valid choice (this lets you for instance put labels in a selector element).
So, we make a first <option> that is simply a label, but also make sure the selector always starts with that option selected. As it's disabled, that makes the selector invalid as far as form posting is concerned, so we can use the CSS :valid pseudo class to do all kinds of useful things, like hiding any adjacent element until the main select element is valid.
And of course you can still "fill" the second selector using JS, with an event listener on the first selector so that its change triggers some JS that appends a bunch of option elements to the second one, but this is really something you want to do without a network request: have your code already know which primary values map to which arrays of secondary values by doing a fetch for the full mapping on pageload, or even hardcoded it (e.g. during your site building step, or even manually)

How to change an element using a select dropdown menu

I'm trying to change an element through a select drop down menu- however, I'm unable to get it to change dynamically.
<select id="optMapList">
<option>Map 1</option>
<option>Map 2</option>
</select>
<script>
document.getElementById("maptype").innerHTML=optMapList.options[optMapList.selectedIndex].text
</script>

Your code seems to run fine. I think you're missing the fact that you have to listen to a 'change'-event in order to by able to run code on changes. This is done as follows:
var optMapList = document.getElementById('optMapList');
optMapList.onchange = function() {
document.getElementById("maptype").innerHTML = optMapList.options[optMapList.selectedIndex].text;
}
Working example: http://jsfiddle.net/thijs_s/gx9mf1ct/

You can just use the value property of the select list inside an event listener as noted below.
var optMapList = document.getElementById('optMapList');
optMapList.onchange = function() {
document.getElementById("maptype").innerHTML = optMapList.value;}

Changing selection in a select with the Chosen plugin

I'm trying to change the currently selected option in a select with the Chosen plugin.
The documentation covers updating the list, and triggering an event when an option is selected, but nothing (that I can see) on externally changing the currently selected value.
I have made a jsFiddle to demonstrate the code and my attempted ways of changing the selection:
$('button').click(function() {
$('select').val(2);
$('select').chosen().val(2);
$('select').chosen().select(2);
});

From the "Updating Chosen Dynamically" section in the docs: You need to trigger the 'chosen:updated' event on the field
$(document).ready(function() {
$('select').chosen();
$('button').click(function() {
$('select').val(2);
$('select').trigger("chosen:updated");
});
});
NOTE: versions prior to 1.0 used the following:
$('select').trigger("liszt:updated");

My answer is late, but i want to add some information that is missed in all above answers.
1) If you want to select single value in chosen select.
$('#select-id').val("22").trigger('chosen:updated');
2) If you are using multiple chosen select, then may you need to set multiple values at single time.
$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');
Information gathered from following links:
1) Chosen Docs
2) Chosen Github Discussion

Sometimes you have to remove the current options in order to manipulate the selected options.
Here is an example how to set options:
<select id="mySelectId" class="chosen-select" multiple="multiple">
<option value=""></option>
<option value="Argentina">Argentina</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Japan">Japan</option>
<option value="Thailand">Thailand</option>
</select>
<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);
function activateChosen($container, param) {
param = param || {};
$container.find('.chosen-select:visible').chosen(param);
$container.find('.chosen-select').trigger("chosen:updated");
}
function selectChosenOptions($select, values) {
$select.val(null); //delete current options
$select.val(values); //add new options
$select.trigger('chosen:updated');
}
</script>
JSFiddle (including howto append options):
https://jsfiddle.net/59x3m6op/1/

In case of multiple type of select and/or if you want to remove already selected items one by one, directly within a dropdown list items, you can use something like:
jQuery("body").on("click", ".result-selected", function() {
var locID = jQuery(this).attr('class').split('__').pop();
// I have a class name: class="result-selected locvalue__209"
var arrayCurrent = jQuery('#searchlocation').val();
var index = arrayCurrent.indexOf(locID);
if (index > -1) {
arrayCurrent.splice(index, 1);
}
jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});

Simulate change option in a select with JavaScript?

In this site, for example, there are 3 SELECT elements (Step 1, Step 2 and Step 3). I'm able to change the value of the first one with selectElement.value = selectElement.options[i].value;, but when I change it the Step 2 doesn't update it's options as it would if I would select it with the mouse. Is there any way to force it to update?

The best way to do this is to have a function that updates the contents of the second select box, and call that function when you update the value of the first one. You'd then have a change handler (or a click handler, or a timer; depends on what you prefer for a UX) on the first select box that calls that function when its value changes. E.g. (in near-pseudocode):
<select id="box1">...</select>
<select id="box2">...</select>
<select id="box3">...</select>
function setValueInBox1(val) {
var box1 = document.getElementById("box1");
box1.value = val;
fillBox2();
}
document.getElementById("box1").addEventListener("change", fillBox2);
So both the event and your logic call the same routine, fillBox2. Live example:
function setValueInBox1(val) {
var box1 = document.getElementById("box1");
box1.value = val;
fillBox2();
}
document.getElementById("box1").addEventListener("change", fillBox2);
function fillBox2() {
var box1Value = document.getElementById("box1").value;
var box2 = document.getElementById("box2");
box2.options.length = 0;
for (var n = 0; n < 3; ++n) {
box2.options[box2.options.length] = new Option(box1Value + " - sub " + n);
}
}
select {
min-width: 8em;
}
<select id="box1" size="3">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<select id="box2" size="3">
<option>none - sub 1</option>
<option>none - sub 2</option>
<option>none - sub 3</option>
</select>
<select id="box3"></select>
People routinely try to trigger the actual event handler of box1 (the change event in the above), but that can be difficult and error-prone. By having a common function that both the event handler and your logic can call, you avoid that issue.
If for whatever reason the above is impossible, if you're doing it specifically in IE and not worrying about cross-browser behavior (from your comment), you might look at the fireEvent method. For other browsers, you might look at the DOM dispatchEvent method.

Well , you could always invoke the method like
document.getElementById('x').onchange();
, where 'x' is the id of the select element