We Keep Coding

How to refresh a select list in html

I have a drop-down list where depending on the selected value, the next drop-down list shows specific values. when changing the value of the first list and then going back to the old value, the second list does not update. keeps the same value selected before. How can I make the second list update to the value I marked as selected by default whenever I change the value of the first list?
I hope you guys were able to understand me, and I thank you for your time.
Here's the code:
<select onchange="showprd('hidevalue', this), showprd2('hidevalue2', this)">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="hidevalue">
<option value="" disabled selected hidden>Selecione o produto</option>
<option value="pleno">Pleno</option>
<option value="integrado">Integrado</option>
</select>
<select hidden id="hidevalue2">
<option value="" disabled selected hidden>Selecione o produto</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</body>
<script>
function showprd(id, elementValue) {
document.getElementById(id).style.display = elementValue.value == 0 ? 'block' : 'none';
}
function showprd2(id, elementValue) {
document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
}
</script>

TL;DR. Control the input value changes in one place.
Please see the updated snippet below. html structure hasn't been changed, but I've removed the inline js call and updated the id names. JavaScript blocks are commented in details.
In a nut-shell, this code listens for any change to the parent select dropdown. Whenever a change occurs, its child dropdowns will reset their values and toggle their visibility accordingly.
// Assign each dom element to a variable
const primarySelect = document.querySelector('#primary');
const childSelect1 = document.querySelector('#child1');
const childSelect2 = document.querySelector('#child2');
const defaultValues = document.querySelectorAll('.default');
function resetInputs() {
// Reset the child select options to default
defaultValues.forEach(option => option.selected = true);
}
function handlePrimary(e) {
// Reset the child select values whenever the parent value changes
resetInputs();
// `input` value is always a string. Here we're converting it to a number
const val = parseFloat(e.target.value);
// Toggle visibility of child select dropdowns
[childSelect1, childSelect2].
forEach((select, i) => select.style.display = val === i ? 'block' : 'none');
}
primarySelect.addEventListener('change', handlePrimary);
<select id="primary">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<br>
<br>
<select hidden id="child1">
<option class="default" value="" disabled selected hidden>Selecione o produto</option>
<option value="pleno">Pleno</option>
<option value="integrado">Integrado</option>
</select>
<select hidden id="child2">
<option class="default" value="" disabled selected hidden>Selecione o produto</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>

If I understood correctly, the expected behavior is when the second or third <select> is hidden, the <select> should go back to default (the first <option>?). If so, then remove disabled and hidden from the first <option> of the second and third <select> then add the following:
selectObj.hidden = true;
selectObj.selectedIndex = 0;
The example below has a <form> wrapped around everything (always use a form if you have more than one form control. By using HTMLFormElement interface I rewrote the code and can reference all form controls with very little code. Inline event handlers are garbage so don't do this:
<select id='sel' onchange="lame(this)">
Instead do this:
selObj.onchange = good;
OR
selObj.addEventListener('change', better)
Read about events and event delegation
const UI = document.forms.UI;
UI.onchange = showSelect;
function showSelect(e) {
const sel = e.target;
const IO = this.elements;
if (sel.id === "A") {
if (sel.value === '0') {
IO.B.hidden = false;
IO.C.hidden = true;
IO.C.selectedIndex = 0;
} else {
IO.B.hidden = true;
IO.B.selectedIndex = 0;
IO.C.hidden = false;
}
}
}
<form id='UI'>
<select id='A'>
<option disabled selected hidden>Pick</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
<br>
<select id="B" hidden>
<option selected>Pick B</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
<select id="C" hidden>
<option selected>Pick C</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</form>

I give you an example for your reference:
let secondList = [
[{
value: "pleno",
text: "Pleno"
},
{
value: "integrado",
text: "Integrado"
}
],
[
{
value: "junior",
text: "Junior"
},
{
value: "senior",
text: "Senior"
}
]
]
function update(v){
let secondSelectBox=document.getElementById("second");
secondSelectBox.style.display="none";
let optionList=secondList[v.value];
if (optionList){
let defaultOption=new Option("Selecione o produto","");
secondSelectBox.innerHTML="";
secondSelectBox.options.add(defaultOption);
optionList.forEach(o=>{
let vv=new Option(o.text,o.value);
secondSelectBox.options.add(vv);
})
secondSelectBox.style.display="block";
}
}
<select onchange="update(this)">
<option value="" disabled selected hidden>Selecione</option>
<option value="0">São Francisco</option>
<option value="1">Bradesco</option>
</select>
<select hidden id="second">
</select>

jquery get selected values of multiple select boxes

i have this form ..
<form method="post" action=''>
<select class="first">
<option value="0">choose ...</option>
<option value="1">Hello</option>
<option value="3">It's</option>
</select>
<select class="second">
<option value="0">choose ...</option>
<option value="2">World</option>
<option value="4">me</option>
</select>
<input type="text" class="dest" value="" />
</form>
and would like to dynamically gather selected informations with jQuery, because I need to decide on the selected values ...
When you select specific combination of OPTION values (lets say Hello + World) it should add some value to INPUT.dest and lock it (disable from editing) ...
But I can't make it work ... What I have, is that on each change of each select (separately only) i can map the actual value
$(document).ready(function () {
$(".first").change(function () {
var option = $(this).find("option:selected").val();
$(".dest").val(option);
});
$(".second").change(function () {
var option2 = $(this).find("option:selected").val();
$(".dest").val(option2);
});
});
Here is the live demo in fiddle
Do you know what am I missing? I know it will be just a little thing .. thank you

I would generalize it and use one event listener, and then gather the combination and do whatever:
$("select").change(function () {
var first = $(".first").find("option:selected").val();
var second = $(".second").find("option:selected").val();
if(first == 1 && second == 2)
$(".dest").val("Hello world").prop("disabled",true);
else
$(".dest").val("Something else").prop("disabled",false);
});
http://jsfiddle.net/cxx428af/3/

Button to add selected="selected" from outside form

I am using laravel, and trying to integrate some jquery, which I am not very good at.
I have a multiple select box with potentially lots of options, based on database values.
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
The user can select tools directly from the select box, but this can be a huge list and therefore I am also displaying a search field below the select box to
search the database of tools so the user can see more info about the tool, and then decide if he wants to include it.
Currently the user has to first search, then find the entry in the select box and select it.
I want a faster solution with a button next to the info about the tool, that automatically adds selected="selected" to the correct option in the select box above.
I tried
<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>
<script type="text/javascript">
addselect = function (id){
$("div.toolselect select").val(id);
}
But that erased all the other other selected fields.
Any ideas would be appreciated.

Try using jQuery's prop function:
<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>
<script type="text/javascript">
addselect = function (id){
$('.toolselect select option[value="'+ id +'"]').prop('selected');
}
</script>

For a multi-select, the value is an array of all the selected items. You're just setting the value to a single item, which is treated as an array of one element, so all the other selections get discarded.
So you should get the old value, add the new ID to it, and then set that as the new value.
function addselect(id) {
$('.toolselect select').val(function(i, oldval) {
oldval = oldval || []; // oldval = null when nothing is selected
oldval.push(id);
return oldval;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
<input type="button" value="Select 1" onclick="addselect('1')"/>
<input type="button" value="Select 2" onclick="addselect('2')"/>
<input type="button" value="Select 3" onclick="addselect('3')"/>

Instead of using this :
addselect = function (id){
$("div.toolselect select").val(id);
}
Try this :
addselect = function(id) {
var temp = [];
var arr = $('select').val();
for(i=0;i<arr.length;i++){
temp.push(arr[i]);
}
temp.push(id);
$("div.toolselect select").val(temp);
}
This way your previous selection is preserved, and the new selection is appended to the previous selection.
Hope this helps.

Creating a text and dropdown list search functionality

I've written a piece of code that allows a Sharepoint list user to select a search criteria from a drop down list. By default, next to this, I'd like a textbox to be present. Besides the text box on the page is a Search button and a Reset button. This looks like this:
Ideally, what I'd like is that if the user selects a specific option in the search criteria drop down list (say, Field 3), the text box will change to a drop down list, which they choose their option from and then search for as usual.
This is what I have so far:
<script type="text/javascript">
function RedirectUrl() {
var sField = document.getElementById("searchField").value;
if (sField == "Field3") {
var search = document.getElementById("dropdownSearch").value;
} else {
var search = document.getElementById("textSearch").value;
}
var url = "";
if (search != "") {
url = "FilterName=" + sField + "&FilterMultiValue=*" + search + "*";
window.location.href = //Url of our site
}
else {
return false;
}
}
function ClearUrl() {
//Refresh page
}
</script>
Search Field: <select id="searchField">
<option selected value="Field1" >Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>
if (searchField == "Field3") {
Search text: <select id="dropdownSearch" />
<option selected value="One" >One</option>
<option value="Two">Two</option>
</select>
} else {
Search text: <input type="text" id="textSearch" />
}
</script>
<input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
<input type="button" id="btnClear" value="Reset Filters" onclick="return ClearUrl();" />
The functionality of this code works. If the user selects "Field3" from the search field drop down list, whatever is selected in the drop down list is shown. If the user selects any other option from the search field drop down list, the text in the "search text" field is shown.
However, due to the if statement contained within, it looks like this:
Questions:
How can I get the code to automatically display either the text box or the drop down list depending on the user's selection in the Search Field?
How can I hide the if statement logic?
As can probably be guessed from the code I have almost zero experience in Javascript (and absolutely zero experience in JQuery, if any answers tend that way) - although I have tagged JQuery as from what little I do know I feel it might be better(?) suited for it.
Edit: My not-working code after ZiNNED's help:
Search Field:
<select id="searchField">
<option selected value="Field1">Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>Search Text:
<select id="dropdownSearch" style="display: none;">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<input id="textSearch" />
<input type="button" id="btnSearch" value="Search" />
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js">
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>

You should do a couple of things.
First: remove the if-statement from the code and hide the dropdownSearch select by default:
HTML
Search Field: <select id="searchField">
<option selected value="Field1" >Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>
Search text:
<select id="dropdownSearch" style="display: none;" />
// All options and their values
</select>"
<input type="text" id="textSearch" />
Second, add a reference to jQuery and the following JavaScript to your document:
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
This adds an event to the searchField dropdown that triggers when its value is changed. If the value equals Field3 the dropdownSearch is shown; otherwise the textSearch.
See this FIDDLE.
EDIT: After your edit, try changing the following:
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js">
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>
to:
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>
You shouldn't add JavaScript to script tags when you're also referring to an external file in it.

More Properties of Dropdown options

I've got a dropdown setup going on in which the user enters an input value, chooses a calculation to perform on that number from a dropdown, then a function displays the result.
What I would like is to add more 'values' to the dropdown, so when an option is selected from the list, it can also, say, display some text stored in the list, or some other information. Right now I can return the selected option's value (.value) and use the option's name (.text) to perform functions, but is there any more data I can add to each selection to be used later?
<html>
<head>
<script language="JavaScript">
function myfunction(form)
{
var i = parseFloat(form.Input.value, 10);
var e = document.getElementById("calculationList");
var strUser = e.options[e.selectedIndex].value;
form.Output.value = strUser*i;
}
</script>
</head>
<body>
<form>
Input Number:
<INPUT NAME="Input" SIZE=15>
Make a selection:
<select id="calculationList" onchange="myfunction(form)">
<option></option>
<option value="2">Double It</option>
<option value="3">Triple It</option>
<option value="10">Multiply It By ten</option>
</select>
Output Number:
<INPUT NAME="Output" SIZE=15>
</FORM>
</body>
</html>

Basically you may attach data attribute to your options like that:
<select id="calculationList">
<option></option>
<option value="2" data-aaa="10">Double It</option>
<option value="3" data-aaa="20">Triple It</option>
<option value="10" data-aaa="30">Multiply It By ten</option>
</select>
And later get the content of the attribute:
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
jsfiddle -> http://jsfiddle.net/pzKrr/
Edit:
If you want to implement my solution remove onchange="myfunction(form)" from the select tag. After that add the following code just after that myfunction
window.onload = function() {
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
};