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>
Related
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.
function myFunction() {
var chosen = document.getElementById("input").value;
alert(chosen);
}
<select id="input" onchange="myFunction()">
<option selected>Choose...</option>
<option>ONE</option>
<option>TWO</option>
<option>THREE</option>
<option>FOUR</option>
</select>
So what I am trying to achieve, is when the user selects from the list (ONE, TWO, THREE or FOUR), then it should alert their selection to the window.
However, this doesn't work for me.
Any help would be deeply appreciated!
If I have
<select name="visibility">
<option value="private">private</option>
<option value="public">private</option>
<option value="hidden">private</option>
</select>
How would I make the hidden option the default?
I tried
<option value="hidden" selected>hidden</option>
But if I choose another option and then refresh, it gets replaced with that other value. How would I make it default, regardless of refresh?
your block should work fine on Chrome and IE.
however Firefox is saving your drop menu and its an old bug.
here how you fix it: add autocomplete="off" to your select tag
like this:
<select name="visibility" autocomplete="off">
<option value="private">1</option>
<option value="public">2</option>
<option value="hidden" selected>3</option>
</select>
You should use local storage to store the selected value and on reload your check for that item and add the selected attribute
http://jsfiddle.net/d948fL09/4/
if( typeof localStorage.visibility !== "undefined" ){
$('select').find($('option[value="' + localStorage.visibility + '"]').attr('selected', true))
}
$('select').on('change', function(){
localStorage.visibility=$(this).val();
console.log(localStorage.visibility)
})
Use the selected="selected" and autocomplete="off" attribute like so:
<select name="visibility" autocomplete="off">
<option value="private">private</option>
<option value="public">private</option>
<option value="hidden" selected="selected">private</option>
</select>
This works as you want it to, no matter how often you reload the page.
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>
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;
}
});