I am developing a form in which I need to show a list box when the user selects one of the options in a select box. This means that initially the list box will be hidden, and when the user clicks on an option the list box should be displayed.
Thanks in advance for your quick response, Tanu
This could be done using jQuery easily.
<select id="Univ">
<option value="1">DU</option>
<option value="2">IIT</option>
<option value="3">MU</option>
<option value="4">BHU</option>
</select>
<select id="branch">
<option value="1">Bio</option>
<option value="2">Chemistry</option>
<option value="3">Physics</option>
<option value="4">Engg</option>
</select>
jQuery:
$(document).ready(function () {
$('#branch').hide();
$('#Univ').click(function () {
$('#branch').show();
});
});
Dont forget to include the jQuery reference file in your HTML:
<script type="text/javascript" src="jquery.js"></script>
Related
<select name="cat" class="input">
<option value="">----------Select Category--------</option>
<option value="Finance">Finance</option>
<option value="Travel">Travel</option></select>
<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="input">
<option value="">---------Select subcategory------</option>
<option value="Financial Planning">Financial Planning</option>
<option value="Financial Control">Financial Control</option>
<option value="Corporate Finance">Corporate Finance</option>
<option value="Financial Management">Financial Management</option>
<option value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>
How to make that possible in HTML? Can I use statements like if... else in HTML???
What should i do to achieve that Dynamic Enabling and Disabling in HTML?
First you need to reference a JQuery Lib in your HTML page. You can follow this link to understand it.
And then you will need a data structure to map the relationship between categories and the subcategories. It can look like this:
suppose also you have added id attributes to each select same as their respective name.
var catAndSubCats= {
Finance: ["Financial Planning", "Financial Control","Financial Management",
"Financial Statement"],
Travel: ["Travel Planning","Travel Management", "Corporate Travel"]
}
Then you need to write an onchange handler for $('select[name=cat') inside which you need to filter the $('select[name=scat]) options based on the selected options text in cat.
With that you use an event to populate your select subcat based on what the cat is:
<script>
$(document).ready(function(){
$("#cat").change(function () {
var $selectedCat = $(this).find('option:selected').text();
$("#subCat").html($("#subcat").filter(function () {
return $.inArray($(this).text(), catAndSubCats[$selectedCat ]) >= 0;
});
});
</script>.
You can put above code in your head tag in your HTML file. Please don't forget the reference for JQuery Library
I am inspired via this solution.
I hope it will help you
As was stated above, you will need to link to the jQuery library. Here is my solution, which requires adding some classes to your HTML (note, I did this all inline for the sake of time):
EDIT**: It turns out there's a 'disabled' property for options in a select box. My last code did not work properly. This one should. Please see updated fiddle at the end.
<select name="cat" class="first">
<option value="">----------Select Category--------</option>
<option class="finance" value="Finance">Finance</option>
<option value="Travel">Travel</option></select>
<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="second">
<option value="">---------Select subcategory------</option>
<option class="finance" value="Financial Planning">Financial Planning</option>
<option class="finance" value="Financial Control">Financial Control</option>
<option class="finance" value="Corporate Finance">Corporate Finance</option>
<option class="finance" value="Financial Management">Financial Management</option>
<option class="finance" value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>
<!-- Copy and past everything below right before the closing </body> tag in your HTML -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$('select.first').change(function(){
var sel = $('select.first option').map(function(){
return $(this).attr('class');
});
for (i = 0; i < sel.length; i++) {
if ($('select.first option:selected').hasClass(sel[i])) {
$('select.second option').not('select.second option:first-child, .' + sel[i]).prop('disabled', true);
$('select.second option.' + sel[i]).prop('disabled', false);
}
}
});
});
</script>
Here's a JSFiddle: http://jsfiddle.net/SQm9T/1/
<pre>
<td>
<select name="proses1" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses2" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses3" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
</pre>
i have tag html like above.. and i want for example i selected 1-itemset from proses1 and then i choose 1-itemset from proses2,
1-itemset from proses1 it get back to default(-------),
so the point is i want option just can selected one option.. how i can make it. thanks before
Although you havent said what type of process you want, i suggest you do it with jquery like
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
FIDDLE
EDIT
To use this, first you need to add jQuery library to your code then place this inside $(document).ready() method. As a summary, place the code below inside your head section.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
});
</script>
What this does is to add an onChange event handler with .on("change") method to the select elements and in that handler all select elements values are being set to 0 which is the very first option except the current one.
I've created a simple select menu
<select class="element">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
However, when I click on the select menu, nothing happens.
I've attached an jQuery onclick listener to determine if the click is being registered and it is. However, the options are not being displayed.
Is there any particular reason why the options list would not be displayed?
CSS rules as requested:
select {
height: 25px;
background: #FFFFFF;
}
$('.element').on('click', function(){
console.log('clicked');
});
Check this code:
### Listbox
http://jsfiddle.net/4jkE8/2/
Try this on your css:
select {
height: 25px;
background: #FFFFFF;
}
$.noConflict();
$('.element').on('click', function(){
console.log('clicked');
});
Also I think that you have a Javascript or Jquery file that is making conflict, try creating this on your view:
<select class="element">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
<script type="text/javascript">$.noConflict();</script>
Change your class name to something different. Then instead of using it as a class change it to an id. Then in your jQuery detect the on change event. Usually when having a select option you only need one of them. The id attribute is meant for when there is only one one of that element on a page.
I feel fairly certain that the click event does not work for all browsers on a select list. You may want to check out this question: Click event on select option element in chrome
HTML Code:
<select id="status">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
<select id="status">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
JavaScript Code:
$('#status').on('change', function(){
console.log('changed');
});
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>