I have an easy question for you today. I have a select box that enables the user to select multiple items. Also, when the user returns to the page, he can see which items he selected and unselect them if necessary. The trouble is that when I try to unselect, the selection just turns gray; it does NOT unselect.
<select name="MySelect" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
So, when the element above renders to the page, I have no way to unselecting the option. The value is STILL getting passed to the form.
Any help?
You can deselect options in a multi-value select list by ctrl-clicking it.
You can use JS object to memorize the status of a row and click action on select (JQuery).
$('#yourselect').click( function(e){
var i = this.selectedIndex;
if(this.options[i].selectedOld==true){
this.options[i].selected = false;
this.options[i].selectedOld = false;
}
else{
this.options[i].selectedOld = true;
}
});
Related
I have a drop-down list which POSTs to express and then redirects to same page.
Now, I want the one valid option to be selected before submitting, hence I added required property in <select> tag.
But, I also want a value to be Selected in the list when page renders
If first time render, then first option
If after submitting, the submitted option to be selected by default
Here is the skeleton code
<select required data-style="btn-info" name="selectpicker">
<optgroup label="Select Map">
<option name="table1" value="Station">Station</option>
<option name="table2" value="Station2">Station2</option>
</optgroup>
</select>
and the things I tried
<option value="" selected disabled>Select station</option>
<option name="table1" value="Station" selected>Station</option>
but none of them fulfills my requirements.
if you are using javascript for handling the form just add event.preventDefault() in your onsubmit function so when you submit it won't revert back to default
The problems were solved by
<form action="any" method="any" onSubmit="return fieldCheck();">
<select required id="collec" data-style="btn-info" name="selectpicker">
<option value="Select Station" selected disabled hidden>Select City</option>
<option name="table1" value="Vice City">Vice City</option>
<option name="table2" value="Delhi City">Delhi City</option>
and script
function fieldCheck() {
var collec = document.querySelector('#collec');
if(collec.value != "Select Station") {
return true;
}
else {
alert("Select a city first!!");
return false;
}
}
I am kinda new to programming so I have no idea how to fix my issue.
So I have a select id="one", and what I want is that when the user selects an option it shows a select id="two" and when the user selects an option it shows a select id="three" and so on...
I tried with 'display=none' but I don't really like that way because anyone can make the select show up without selecting an option. Is there any possible way of doing that?
Here is my first select:
<select class="form-control" id="one" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
And when the user picks an option this select must show up:
<select class="form-control" id="two" required>
<option value="c">c</option>
<option value="d">d</option>
</select>
Thank you for your time and I hope you can help me!
I think the issue is related to on select event not binding to dynamically created second select(id="two"). So try adding event listener via Jquery when you create new select box.
$("#one").on('change', function () {
// Add second select box with id="two" here
$('<select id="two"><option></option></select><br/>').appendTo('body');
//After adding select add the event listener
$("#two").on("change", function(){
// Write what you want to do here
});
});
How about this? It's very rough and only works on the basis of showing the next select in DOM order. You could add a data attribute to the select to determine which select to show when the value was changed.
$('select').change(function(){
if ($(this).val()) {
$(this).next('select').show();
}
});
$('select:first').show();
select {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">- please select -</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select>
<option value="">- please select -</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<select>
<option value="">- please select -</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
If you're worried about someone showing the second select and without submitting something for the first then you can always run a check client side to see if both selects have a value or check server side.
I have a <select> element, used for navigation. You click on it to choose a page to go to, and when clicked it goes to that page. Here is the code for it:
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="/item1" selected>Item 1</option>
<option value="/item2" selected>Item 2</option>
<option value="/item3" selected>Item 3</option>
</select>
When I use it, it goes to the page correctly, however when hitting the back button, the dropdown has the page I went to selected already. For example, if I'm on Item 1, and select Item 2, then go back to Item 1 through the browser's back button, Item 2 is selected in the list, which is kind of confusing.
How can I get it to switch back to the default value?
You can reset your selection box to the default value and then navigate to the new page. Here's an example of how to do that.
<script>
fix_ipad = function(evt){
go_to = document.getElementById('go_to');
go_to.selectedIndex = 0; // reset to default value before leaving current page
};
window.addEventListener("pagehide",fix_ipad,false);
goto_page_and_reset_default = function(){
go_to = document.getElementById('go_to');
go_to_page = go_to.value;
go_to.selectedIndex = 0; // reset to default value before leaving current page
window.open(go_to_page,"_top");
}
</script>
<select onchange="goto_page_and_reset_default()" id='go_to'>
<option value="/item1" selected>Item 1</option>
<option value="/item2" selected>Item 2</option>
<option value="/item3" selected>Item 3</option>
</select>
Possible duplicate https://stackoverflow.com/questions/8861181
Modern browsers implement something known as back-forward cache (BFCache). When you hit back/forward button the actual page is not reloaded (and the scripts are never re-run).
If you have to do something in case of user hitting back/forward keys -- listen for BFCache pageshow and pagehide events.
A pseudo jQuery example:
$(window).bind("pageshow", function() {
// update hidden input field
});
<select onchange="window.open(this.options[this.selectedIndex].value,'_top');this.value=''">
<option value="" selected>Default Value</option>
<option value="/item1">Item 1</option>
<option value="/item2">Item 2</option>
<option value="/item3">Item 3</option>
</select>
I have a problem with my site. I have a select menu and 3 options: images, video and audio. When I click one of the options it should display a button to pick out the image/video/audio to upload, but this doesn't display in Google Chrome. In Firefox there is no problem with this. Does anyone have a solution for this?
Thanks very much!
EDIT:
This is the code
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
things i modified:
the second parameter is now a class name, each value separated by a "|"
used onChange() to trigger a selection (but does not trigger unless the value changes)
used this to pass a reference to the select rather than passing values (you can do more this way)
demo here
<select name="service_id" onChange="showSection(this)">
<option value="video" class='image|audio'>Video</option>
<option value="image" class='video|audio'>Imagini</option>
<option value="audio" class='video|image'>Audio</option>
</select>
<script type="text/javascript">
function showSection(el){
//modified to get the first and second parameters of showSection()
//get the value
var firstParam = el.value;
//get the class name of the selected element, and split it
var secondparam = el.options[el.selectedIndex].className.split('|');
console.log(firstParam);
console.log(secondparam);
}
</script>
Call the function on select not in options:
<select onClick='showSection(this.value,"a")'>
<option value="video" >Video</option>
<option value="image">Imagini</option>
<option value="audio">Audio</option>
</select>
i have tested this in chrome its working alright.
one suggestion is if you are using dropdown then use onchange event rather then using onClick
<?php
$videos=0;
$images=0;
$audios=0;
?>
<select name="service_id">
<option value="video" onClick="showSection('video',['image','audio']);" <?=count($videos)?'selected="selected"':''?>>Video</option>
<option value="image" onClick="showSection('image',['video','audio']);" <?=count($images)?'selected="selected"':''?>>Imagini</option>
<option value="audio" onClick="showSection('audio',['video','image']);" <?=count($audios)?'selected="selected"':''?>>Audio</option>
</select>
At the moment I am using this:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
it redirect me on the location inside of the option value. But it doesn't work as expected .. mean that if I click on the first option of the select, then onChange action not running. I was thinking about javascript, but I think you'll have some better suggestions guys. So how can I make it work if I click on each option it'll redirect me to the it's value?
Because the first option is already selected, the change event is never fired. Add an empty value as the first one and check for empty in the location assignment.
Here's an example:
https://jsfiddle.net/bL5sq/
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://google.com">Google</option>
<option value="https://yahoo.com">Yahoo</option>
</select>
I'd strongly suggest moving away from inline JavaScript, to something like the following:
function redirect(goto){
var conf = confirm("Are you sure you want to go elswhere?");
if (conf && goto != '') {
window.location = goto;
}
}
var selectEl = document.getElementById('redirectSelect');
selectEl.onchange = function(){
var goto = this.value;
redirect(goto);
};
JS Fiddle demo (404 linkrot victim).
JS Fiddle demo via Wayback Machine.
Forked JS Fiddle for current users.
In the mark-up in the JS Fiddle the first option has no value assigned, so clicking it shouldn't trigger the function to do anything, and since it's the default value clicking the select and then selecting that first default option won't trigger the change event anyway.
Update:
The latest example's (2017-08-09) redirect URLs required swapping out due to errors regarding mixed content between JS Fiddle and both domains, as well as both domains requiring 'sameorigin' for framed content. - Albert
to make it as globally reuse function using jquery
HTML
<select class="select_location">
<option value="http://localhost.com/app/page1.html">Page 1</option>
<option value="http://localhost.com/app/page2.html">Page 2</option>
<option value="http://localhost.com/app/page3.html">Page 3</option>
</select>
Javascript using jquery
$('.select_location').on('change', function(){
window.location = $(this).val();
});
now you will able to reuse this function by adding .select_location class to any Select element class
For someone who doesn't want to use inline JS.
<select data-select-name>
<option value="">Select...</option>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
</select>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('select[data-select-name]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
window.location.href = this.options[this.selectedIndex].value;
}
</script>
This can be archived by adding code on the onchange event of the select control.
For Example:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value=""></option>
<option value="http://google.com">Google</option>
<option value="http://gmail.com">Gmail</option>
<option value="http://youtube.com">Youtube</option>
</select>
{{-- dynamic select/dropdown --}}
<select class="form-control m-bot15" name="district_id"
onchange ="location = this.options[this.selectedIndex].value;"
>
<option value="">--Select--</option>
<option value="?">All</option>
#foreach($location as $district)
<option value="?district_id={{ $district->district_id }}" >
{{ $district->district }}
</option>
#endforeach
</select>
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Select...</option>
<option value="https://reactjs.org/">React Js</option>
<option value="https://angularjs.org/">Angular Js</option>
</select>