I am creating a pulldown menu that pushes the user to a selected url. In the list i have several values that are set at 0 which i use for headers in the list. I have set them to 0 so they do nothing.
This works for the first one in the list which has a value of 0 but the others that do have a value of 0 still redirects the browser to a new website with the same domain and /0 at the end? What am i missing?
<select onchange="if (this.selectedIndex > 0) document.location.href=this.value;">
<option value="0" selected="selected">More...</option>
<option value="0">----- Locations -----</option>
<option value="http://www.location1.com/">location1</option>
<option value="http://www.location2.com/">location2</option>
<option value="http://www.location3.com/">location3</option>
<option value="0">----- Other Locations -----</option>
<option value="http://www.olocation1.com/">olocation1</option>
<option value="http://www.olocation2.com/">olocation2</option>
<option value="http://www.olocation3.com/">olocation3</option>
</select>
change your code to:
<select onchange="if (this[this.selectedIndex].value !== '0') document.location.href=this.value;">
<option value="0" selected="selected">More...</option>
<option value="0">----- Locations -----</option>
<option value="http://www.location1.com/">location1</option>
<option value="http://www.location2.com/">location2</option>
<option value="http://www.location3.com/">location3</option>
<option value="0">----- Other Locations -----</option>
<option value="http://www.olocation1.com/">olocation1</option>
<option value="http://www.olocation2.com/">olocation2</option>
<option value="http://www.olocation3.com/">olocation3</option>
</select>
demo: http://jsfiddle.net/pratik136/kWHXX/
Why?
Your code:
onchange="if (this.selectedIndex > 0) document.location.href=this.value;"
was checking for the index of the selected option in the list. Now because list indices start from 0, you were getting expected results when the first (or 0th index) item was selected. But all other items passed the selectedIndex > 0 test and got redirected.
using
onchange="if (this[this.selectedIndex].value !== '0') document.location.href=this.value;"
basically checks for the value of the selected index, and if the value !== '0', it redirects to it.
You're redirecting them to the url 0, which it interprets as /0. You probably want to do a check to make sure that the value is not "0", by using something like this.value !== "0".
Related
I have this 'select' dropdown list on the website:
<select id="customQuestion0" class="form-control maxCharLimit" data-bind="'css':{'inputError': verificationFailed}, 'attr':{'id':'customQuestion' + $index(), tabindex:tabIdx},hasFocus:isSelected, options: answers, optionsText:'answer', optionsCaption:$parent.chooseOneText, value:selectedAnswer, optionsValue:'answerKey'" id="customQuestion0" tabindex="13">
<option value="">Choose One...</option>
<option value="253133968">Doulos Email / Website</option>
<option value="253133969">Cadence Email/Website</option>
<option value="253133970">A colleague / friend</option>
<option value="253133971">Other professional network (eg LinkedIn, Twitter)</option>
</select>
In the Tampermonkey script I can select e.g. option Duolos Email / Website with:
var formCustomQuestion1 = document.getElementById('customQuestion0')
formCustomQuestion0.value = '253133968'
But unfortunately this value 253133968 can change. Is there any way to be able to simply select item #1 in the script (starting the numbering at 0), disregarding the value?
It is working simply with:
formCustomQuestion0.selectedIndex = '1'
So, as the title says I want to change the value of a certain option using JS. I have already looked for it but every answer refers to changing the selected option not the value of a specifical option.
<select class="form-control">
<option value="0" selected>Ver</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
I want to change "Ver" option value from 0 to 1. I don´t know if it is possible but thanks in advance.
Have you tried assigning it an id and then changing it in your js file?
Something like this:
<option value='0' id='opt1' selected>Ver</option>
and in javascript:
document.getElementById("opt1").value = "1";
You can select the option with value 0 using
let opt = document.querySelector('select.form-control option[value="0"]')
You can then change the value by reassigning it
opt.setAttribute('value', '1')
If you have more than one select with class form-control this could be a problem, and you might want to give it/them a unique id — then the selector would be
let opt = document.querySelector('select#your-id option[value="0"]')
Here is a stack snippet doing this, where I've combined the select and the assignment into a single statement. I've also added a change event listener to show the value in the console, so if you switch to 20 then switch to Ver again it would print 20 and then 1 to the console, showing you that the value is indeed 1, not 0
document.querySelector('select.form-control')
.addEventListener('change', function(e) {
console.log(this.value);
});
document.querySelector('select.form-control option[value="0"]')
.setAttribute('value', '1');
select {
min-width: 10em;
}
<select class="form-control">
<option value="0" selected>Ver</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
Hello you can assign the value with the following instruction
$("#SelectID").val("value option");
document.getElementById("SelectID").value = "value option";
reference in this url Set value of combobox or select
I'm working With Html(JSP) and Javascript. I have a dropdown box with id "examcenter" containing many optgroup as shown in the following code. in the function loadDrivingSchool() in javascript, I would like to set selected the value of the selected element. the loadDrivingSchool() function calls a controller in a server and when I return the view, the dropdown list does not have a selected value. I want to set this selected value to the value that the user choose before the reloading of the page. I have try the following Javascript code but it is not working:
document.getElementById('examcenter').getElementsByTagName('option')[examCenter].selected = 'selected' ;
<select id="examcenter" onchange="loadDrivingSchool();">
<optgroup label="ADAMAOUA">
<option value="1">TIBATI</option>
<option value="2">TIGNERE</option>
<option value="3">MEIGANGA</option>
<option value="4">BANYO</option>
<option value="5">NGAOUNDERE</option>
</optgroup>
<optgroup label="CENTRE">
<option value="6">YAOUNDE</option>
<option value="7">ESEKA</option>
<option value="8">AKONOLINGA</option>
<option value="9">NANGA EBOKO</option>
<option value="10">MONATELE</option>
<option value="11">MBALMAYO</option>
<option value="12">MFOU</option>
<option value="13">NGOUMOU</option>
<option value="14">BAFIA</option>
<option value="15">NTUI</option>
</optgroup>
<optgroup label="EXTREME NORD">
<option value="20">MAROUA</option>
<option value="21">KAELE</option>
<option value="22">KOUSSERI</option>
<option value="23">MORA</option>
<option value="24">YAGOUA</option>
<option value="25">MOKOLO</option>
</optgroup>
<optgroup label="EST">
<option value="16">YOKADOUMA</option>
<option value="17">ABONG-MBANG</option>
<option value="18">BATOURI</option>
<option value="19">BERTOUA</option>
<option value="62">NGUELEMENDOUKA</option>
</optgroup>
</select>
What I think you are trying to do is keep a track of what the user has selected, without submitting that selected option. That can only be achieved if you keep a record of that in some way, possibly using the session attribute.
You can probably store the value of the selected options in a session and then get it's value using AJAX.
But if I am wrong and you are trying to just simply get the value of the selected option without leaving that page, then you can try this to display the value of the selected option in your dropdown:
alert( document.getElementById("examcenter").value );
Also, I see a problem in your code. You are using
document.getElementById('examcenter').getElementsByTagName('option')[examCenter].selected = 'selected' ;
Instead, you should use:
document.getElementsByTagName('option').selected = true ;
I want to check if a selectbox has selected an item or is empty. If option is selected no problem, I can use
$('main_user_selector_selectbox').find('option:selected').val() to get the value or $('main_user_selector_selectbox')find.('option:selected').text() to get the text.
Issue is, when nothing is selected I always receive the information of first option.
<select class="main_user_selector_selectbox" name="main_user_select_box">
<option value="US20160622053653am"> Beckenbauer, Franz </option>
<option value="US20160618044520am"> Engel, Laura </option>
<option value="US20160618094232am"> Gonzaga, Bengie </option>
<option value="US20160623055042am"> Neureuter, Walter </option>
<option value="US20160618050746am"> Rosenberger, Trude </option>
<option value="US20160622102555am"> Schuhmacher, Michael </option>
<option value="US20160618063016am"> Tinay, Decebil </option>
<option value="US20160615115928am"> Weiss3, Katrin </option>
</select>
I tried this script with datatables to receive some information to allow or disallow selection of rows in datatable.
var table = $('#rights_grid').DataTable();
table.on( 'select' , function () {
var user_id = $(".main_user_selector_selectbox").find('option:selected').val();
alert(user_id);
}
)}
Add an empty value as the first item in your select box
<option value=""></option>
Now you can simply check for the value of the select box. It will return nothing if none is selected.
$('.main_user_selector_selectbox').val()
So I have 3 select boxes and a submit button. If no value has been selected in any of the select boxes nothing happens when the submit button is clicked. If values have been selected in all 3 of the select boxes then clicking on the submit button refreshes the page with a 2 second delay.
Here's what I have so far that doesn't work:
HTML
<select class="select1" name="select1">
<option value="0">-- Please Select --</option>
<option value="5">Blue</option>
<option value="6">Green</option>
<option value="7">Red</option>
</select>
<select class="select2" name="select2">
<option value="0">-- Please Select --</option>
<option value="5">big</option>
<option value="6">small</option>
<option value="7">medium</option>
</select>
<select class="select3" name="select3">
<option value="0">-- Please Select --</option>
<option value="5">1</option>
<option value="6">2</option>
<option value="7">3</option>
</select>
<input type="submit" value="something1" name="something2" onclick="refresh(2000)" class="something3" id="something4">
JS
if($(".select1" && ".select2" && ".select3")).value !== "0") {
function refresh (timeoutPeriod){refresh = setTimeout(function(){window.location.reload(true);},timeoutPeriod);}
}
But the problem Im having here as well is that refresh would not be defined is the statement is not true(onload etc). I have looking around for a couple of hours and can't really find much, or maybe im not doing something right. Any help or guidance would be appreciated.
There's a few problems with your current code:
Incorrect use of jQuery Selectors $(".select1" && ".select2"..
jQuery Selectors use CSS like selector texts, to collect multiple rules
Because it's three different values you're checking, you'd have to check each
one.
Scoping and placement of function refresh() is ambiguous and uncalled.
jQuery doesn't have a .value property, you'd have to call it via .val() for jQuery objects.
<script>
function refresh() {
if( $(".select1 option:selected").val() !== "0" &&
$(".select2 option:selected").val() !== "0" &&
$(".select3 option:selected").val() !== "0" ) {
setTimeOut(function(){
window.location.reload();
}, 2000 );
}
}
</script>
You want a more elegant solution?
HTML:
<select class="select1" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">Blue</option>
<option value="6">Green</option>
<option value="7">Red</option>
</select>
<select class="select2" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">big</option>
<option value="6">small</option>
<option value="7">medium</option>
</select>
<select class="select3" onchange="handleChange($(this))">
<option value="0">-- Please Select --</option>
<option value="5">1</option>
<option value="6">2</option>
<option value="7">3</option>
</select>
<input type="submit" onclick="tryRefresh(2000)">
JS
var selected = 0;
function handleChange($select) {
$select.val() ? selected++ : selected--;
}
function tryRefresh(delay) {
if (selected === 3) {
setTimeout(refresh, delay);
}
}
function refresh() {
window.location.reload(true);
}
You are wrong at a place,
if($(".select1" && ".select2" && ".select3")).value !== "0") {
function refresh (timeoutPeriod) {
refresh = setTimeout(function() {
window.location.reload(true);
},timeoutPeriod);
}
}
This won't work. In computer language, you need to check one condition, then move on to the other.
The condition you are using would work if all the operators were bool such as
if((bool1 && bool2 && bool3) {
/* code executes if all three bools are true!
*/
}
So what you need is, this:
if($('.select1'.val() != '0' &&
'.select2'.val() != '0' &&
'.select3'.val() != 0)) {
function refresh (timeoutPeriod) {
refresh = setTimeout(function() {
window.location.reload(true);
}, timeoutPeriod);
}
}
This way, you will first check the select1 then select2 and then the last one, if they all don't have the 0 value. then the function will continue. Otherwise it will stay as it is.
Here is a fiddle for the algorithm: http://jsfiddle.net/afzaal_ahmad_zeeshan/tSDKN/2/
I am sorry, I have short time left to pray! So you can get the basic code from fiddle :) I have explained how the select works there.
Good luck brother.