Premise:
In this particular example, I am trying to make a selection in a drop-down menu and change the keyword 'something' in the onclick() handler mentioned below with whatever value is associated with the selection made in #panel_link_library. Hope this makes sense?
Code so far:
var aaa = document.getElementById('panel_link_library')
aaa.onchange = function() {
document.getElementById("abc").href = this.value
}
<div class="dropdown-plans">
<select id="panel_link_library" name="p_links">
<option value="/pages/home_up/">Location 1</option>
<option value="www.google.com">Location 2</option>
<option value="https://321.com">Location 3</option>
</select>
</div>
<div id="abc" class="panel_link" onclick="location.href='something'">Jump to location</div>
Solution:
Your onclick simply needs to read the value of the selection!
const navToSelection = _ => {
const el = document.getElementById("panel_link_library")
const val = el.options[el.selectedIndex].value
window.location.href = val // That's it!
}
<div id="abc" class="panel_link" onclick="navToSelection()">Jump to location</div>
Explanation:
We first fetch the dropdown element by it's id = panel_link_library
Then we get that elements selected element, and from that read its value property
Use this to then set as the new location for your browser to navigate to
Change the location at the onclick function, then you can go and get the dropbox value and redirect the user.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
var aaa = document.getElementById('panel_link_library');
function goToSomewhere() {
window.location.href= aaa.value;
}
<div class="dropdown-plans">
<select id="panel_link_library" name="p_links">
<option value="/pages/home_up/">Location 1</option>
<option value="https://www.google.com">Location 2</option>
<option value="https://321.com">Location 3</option>
</select>
</div>
<div id="abc" class="panel_link" onclick="goToSomewhere()">Jump to location</div>
You're trying to assign an href to a div. assign it to the onclick handler.
var aaa = document.getElementById('panel_link_library');
aaa.onchange = function (e) {
console.log(e);
var abc = document.getElementById("abc");
abc.addEventListener('click', () => {window.location = e.target.value});
}
Related
I don't know what I've done wrong with this code, I've looked online and all I've seen to do is put the window.onload = function() at the start of the code. However, the value is always printed as null and I can't my head around why it's doing it.
Here is the code:
window.onload = function () {
// Get the select element by its id
const select = document.getElementById("select-filter");
// Get the selected option element
const selectedOption = select.options[select.selectedIndex];
// Get the data-select value
const dataSelect = selectedOption.getAttribute("data-sel");
// Print the data-select value to the console
console.log(dataSelect);
}
<div class="filter-select-container">
<!-- filter selector -->
<div class="filter-selection-container">
<select name="select-filter" id="select-filter">
<option value="filter-all">All</option>
<option value="filter-commercials" data-sel="1">Commercials</option>
<option value="filter-fiction" data-sel="2">Fiction</option>
<option value="filter-music-videos" data-sel="3">Music Videos</option>
</select>
</div>
</div>
Thanks for any help :)
You probably mean for the select to have a change listener on it, and then check the data attribute is defined before trying to log it.
const select = document.getElementById("select-filter");
select.addEventListener('change', handleChange);
function handleChange() {
const selectedOption = select.options[select.selectedIndex];
const dataSelect = selectedOption.getAttribute("data-sel");
if (dataSelect) console.log(dataSelect);
}
<div class="filter-select-container">
<!-- filter selector -->
<div class="filter-selection-container">
<select name="select-filter" id="select-filter">
<option value="filter-all">All</option>
<option value="filter-commercials" data-sel="1">Commercials</option>
<option value="filter-fiction" data-sel="2">Fiction</option>
<option value="filter-music-videos" data-sel="3">Music Videos</option>
</select>
</div>
</div>
I am trying to make it possible in a "normal" html select element to pick more than one option.
And yes: I know that there's an attribute for the select element called "multiple" which makes this possible by creating a scrollable list with a customizable height.
However, this is not what I'm looking for. I don't want a scrollable list, but rather the drop-down list of a "singular" select to show up when activated and then one should be able to pick multiple option with ctrl button pressed down. Ideally, the drop-down list should disappear when one disengages the ctrl button.
Is there some way of overriding the default eventlistener to make a behaviour like this?
Here's what I've tried so far:
<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head>
</head>
<body>
<select id="varSel" name="varSel">
<option value="1">Variable 1</option>
<option value="2">Variable 2</option>
<option value="3">Variable 3</option>
<option value="4">Variable 4</option>
<option value="5">Variable 5</option>
</select>
<script>
let varSelector = document.getElementById("varSel");
var str = "";
var choices = [];
document.body.addEventListener('keydown', function(event)
{
const key = event.key;
if(key === "Control"){
str = "ctrlDown"
}
});
document.body.addEventListener('keyup', function(event)
{
const key = event.key;
if(key === "Control"){
str = "ctrlUp"
}
});
varSelector.addEventListener("change", function() {
var v = varSel.value;
if(str === "ctrlDown"){
choices.push(v);
console.log(choices);
/* Here I need some code to keep all the previous selected options
marked and prevent the drop-down list from hiding after selecting */
}
else{
choices = [v];
console.log(choices[0]);
}
event.preventDefault();
}, false);
</script>
</body>
</html>
Any help or advice is much appreciated, thanks.
May I suggest a different approach? You can still use the multiple attribute and add event listeners for the focus and blur events, which will modify the size attribute:
const mySelect = document.querySelector('#varSel');
mySelect.addEventListener('focus', () => {
const options = mySelect.querySelectorAll('option');
mySelect.setAttribute('size', options.length);
});
mySelect.addEventListener('blur', () => {
mySelect.setAttribute('size', 1);
})
<select id="varSel" name="varSel" size="1" multiple>
<option value="1">Variable 1</option>
<option value="2">Variable 2</option>
<option value="3">Variable 3</option>
<option value="4">Variable 4</option>
<option value="5">Variable 5</option>
</select>
I'm making a chart based on a drop down selection in code igniter, but I'm getting problems with refreshing the value after I select a drop down list.
I'm using onchange but it seems not to be working.
<form>
<select class="form-control btn-primary" id="sel1" onchange="window.setTimeout(function(){ document.location.reload(true); }, this.options[this.selectedIndex].value);">
<option value = "1">Layanan</option>
<option value = "2">Hasil</option>
<option value = "3">Waktu</option>
<option value = "4">Biaya</option>
</select>
</form>
var temp = document.getElementById("sel1").value;
The refresh page is working, but the value is not changing. It keeps getting back to the first selection. Any ideas?
As a solution (may not suit for your case): You need to pass parameter query along with window location string, but you should set an event listener for window load event:
HTML:
<select class="form-control btn-primary" id="sel1" onchange="reloader();">
<option value = "1">Layanan</option>
<option value = "2">Hasil</option>
<option value = "3">Waktu</option>
<option value = "4">Biaya</option>
</select>
Javascript:
function reloader(){
var param = document.getElementById('sel1').value;
var ref = window.location.href.split('?')[0];
if (param)
window.location.href = ref + "?sel1="+param;
}
window.addEventListener('load', function() {
var query = window.location.href.split('?')[1];
if (query) {
var qval = query.split('=')[1];
document.getElementById('sel1').value = qval;
} else {
document.getElementById('sel1').value = 1;
}
});
Try to use the https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/selectedIndex
It will help you select the desired option.
Something like this
document.getElementById("sel1").selectedIndex = 2;
I am trying to get the value from the selector tag in html and pass it to another function which is called myFunction. But the error says that it is null.
< script >
(function() {
var selector = document.getElementById("carSelector");
var value = selector[selector.selectedIndex].value;
console.log(value);
document.getElementById('carsButton').onclick = function() {
myFunction(value);
};
}());
</script>
<div class="selectList">
<select name="cars" id="carSelector">
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="Kia">Kia</option>
</select>
<button id="carsButton" type="button">Show car</button>
</div>
The code should get the car type from the selector and pass it to the function myFunction.
Slight typo (id should be carsButton) and I rearranged the code a little - you were expecting a named function - but not providing one.
You don't really need the named function - you could just log the selected value to the console within the onclick handler - but so that you can practise passing values between function - I left it in.
Also - you only need "(function() {}) if you are using jQuery - oits not needed for this - but again - I left it in - in case you needed it for something else.
(function() {
document.getElementById('carsButton').onclick = function() {
var selector = document.getElementById("carSelector");
var value = selector.value;
myFunction(value);
};
function myFunction(value) {
console.log(value);
}
}());
<div class="selectList">
<select name="cars" id="carSelector">
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="Kia">Kia</option>
</select>
<button id="carsButton" type="button">Show car</button>
</div>
You can just get the value of the <select> - it'll be the value of the selected option:
function show() {
var select = document.getElementById("carSelector");
var value = select.value;
console.log(value);
}
<select name="cars" id="carSelector">
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="Kia">Kia</option>
</select>
<button id="carsButton" type="button" onclick="show()">Show car</button>
you probably meant to get the item from selector.options, selector won't have anything at selector.selectedIndex it will be undefined
var value = selector.options[selector.selectedIndex].value;
I have a select with loads of options. (Code below shortened for sake of example).
I want it to set the value of the input textfield "hoh" to "10" when you click/select all dropdown options, except one, that should set it to 50.
I imagined something like this would work, but its not. What am I doing wrong here?
<select>
<option onselect="document.getElementById('hoh').value = '50'">Hey</option>
<option onselect="document.getElementById('hoh').value = '10'">Ho</option>
<option onselect="document.getElementById('hoh').value = '10'">Lo</option>
....
</select>
<input type="text" id="hoh" value="10">
Something like this should work:
<script>
function myFunc(val) {
if (val == '50') {
document.getElementById('hoh').value = val;
} else {
document.getElementById('hoh').value = '10';
}
}
</script>
<select onchange="myFunc(this.value)">
<option value="1">one</option>
<option value="2">two</option>
<option value="50">fifty</option>
</select>
http://jsfiddle.net/isherwood/LH57d/3
The onselect event refers to selecting (or highlighting) text. To trigger an action when a dropbox selection changes, use the onchange event trigger for the <select> element.
E.g. Since you didn't already set the value attribute of your option tags.
<select id="myselect" onchange="myFunction()">
<option value="50">Hey</option>
<option value="10">Ho</option>
<option value="10">Lo</option>
....
</select>
and somewhere inside of a <script> tag (presumably in your HTML header) you define your javascript function.
<script type="text/javascript>
function myFunction() {
var dropbox = document.getElementById('myselect');
document.getElementById('hoh').value = dropbox[dropbox.selectedIndex].value;
}
</script>
I'm not sure it's wise to repeat the same value among different options in a droplist, but you could expand on this to implement the result other ways, such as if the sole option which will have value 50 is in a certain position, you could compare the selectedIndex to that position.
you could add an onchange event trigger to the select, and use the value of an option to show in the textbox
see http://jsfiddle.net/Icepickle/5g5pg/ here
<select onchange="setValue(this, 'hoh')">
<option>-- select --</option>
<option value="10">Test</option>
<option value="50">Test 2</option>
</select>
<input type="text" id="hoh" />
with function setValue as
function setValue(source, target) {
var tg = document.getElementById(target);
if (!tg) {
alert('No target element found');
return;
}
if (source.selectedIndex <= 0) {
tg.value = '';
return;
}
var opt = source.options[source.selectedIndex];
tg.value = opt.value;
}
Try this code
var inp = document.getElementById('hoh');
sel.onchange = function(){
var v = this.value;
if( v !== '50'){
v = '10';
}
inp.value = v;
};