i want to display 2x dropdown menus both will be pre populated (2nd menu "mainToon" will contain over 200 names but for the example i have shown just a few.
<select id="category" name="Category">
<option value=" "></option>
<option value=" ">-----------------</option>
<option value="Main Toon">Main Toon</option>
<option value="Alt Toon">Alt Toon</option>
<option value="Cyno Toon">Cyno Toon</option>
<option value="Super Toon">Super Toon</option>
<option value="Dust Toon">Dust Toon</option>
</select>
<select id="mainToon" name="mainToon">
<option value=" "></option>
<option value=" ">-----------------</option>
<option value="Agmar">Agmar</option>
<option value="S Tein">S Tein</option>
<option value="Karades">Karades</option>
<option value="Bad Kharma">Bad Kharma</option>
<option value="Ed jeni">Ed Jeni</option>
</select>
by default the first dropdown will show blank and i want the "mainToon" dropdown to be hidden untill any of the following are selected:
"Alt Toon",
"Cyno Toon",
"Super Toon",
"Dust Toon"
Then the form will be visable.
Can i do this by applying a .hidden css code to the dropdown and changing the class dynamically when other options are selected?
many thanks for the help.
First hide your dropdown :-
<select id="mainToon" name="mainToon" style="display:none;">
</select>
And use Jquery show hide function like this :-
$(document).ready(function(){
$("#category").change(function(){
var value = $(this).val();
if(value=="Alt Toon" || value=="Cyno Toon")
{
$("#mainToon").show();
}
else
{
$("#mainToon").hide();
}
});
});
Below show the DEMO how to show DIV based on selection value ,
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
And Here is working demo.
Related
Is it possible to showing selected value from another text box & unselected options to another text box.
For example , I have 2 text boxes & one select box with options(location_1,location_2,location_3).
So when i select option location_2 or any then selected option value will be showing in text_box_1 & remaining unselected options (location_1,location_3) that value will be appearing into another text box is text_box_2.
I have tried to do following ways but only get select option value not unselect.
HTML
<select name="pd_location[]" class="form-control">
<option value="">-- Choose --</option>
<option value="1">Location One</option>
<option value="2">Location Two</option>
<option value="3">Location Three</option>
<option value="4">Location Four</option>
</select>
Jquery
$(document).on('change', '.select_location', function() {
var get_sel_option = $(this).attr("selected_val");
var index= $(".select_location").prop('selectedIndex');
if(index){
var sel_option_test= $('.select_location option ').attr("selected","selected");
}
});
How could i get unselect option values ?
You can use jQuery.map() to get all the options not selected.
Description: Translate all items in an array or object to new array of
items.
$('select[name="pd_location[]"]').on("change", function() {
$('.text_box').val('');
var selected = this.value;
if( selected ) {
$('#text_box_1').val( selected );
var unselected = $(this).find('option:not(:first):not(:selected)').map(function() { return this.value; }).get().join(",");
$('#text_box_2').val( unselected );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="pd_location[]" class="form-control">
<option value="">-- Choose --</option>
<option value="1">Location One</option>
<option value="2">Location Two</option>
<option value="3">Location Three</option>
<option value="4">Location Four</option>
</select>
<input name="text_box_1" id="text_box_1" class="text_box">
<input name="text_box_2" id="text_box_2" class="text_box">
This question already has answers here:
Using Ajax, jQuery and PHP in two dropdown lists
(2 answers)
Closed 8 years ago.
I was making a dropdown switch. I mean when I choose an option of the first drop down the second will show specified message preset's in stead of the first.
**Dropdown one**
<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>
**Dropdown two**
<select name="reason">
<option value="Sexual harassment">Sexual harassment</option>
</select>
How can I make that when I select an option from the first dropdown that the option values of the second will switch?
Thank you for help
It's called hierselect, chained or related selects.
I like this jquery plugin: http://www.appelsiini.net/projects/chained
So you have predefined values for each dropdown value from first list
<select id="first">
<option value='ban' data-show="#optionsOne">Ban Ban</option>
<option value='banAll' data-show="#optionsTwo">Ban All</option>
</select>
And you have other (hidden) dropdown for each of your options:
<select id="optionsOne" class='drop'>...</select>
<select id="optionsTwo" class='drop'>...</select>
When #first changes values, show relative dropdown:
$('#first').change(function(){
$('.drop').hide(); // hide all dropdowns
id = $('option:selected', this).data('show'); // take relevant id
$(id).show(); // show that dropdown with above id
});
Call javascript function event onchange,
<select name="bantype" onchange="getoptions(this.value);">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select><br/><br/>
<select name="reason" id="reason"></select>
In your function, use following
getoptions(val) {
if(val == 'user') {
var your_options = '<option value="abc">Abc</option>';
jQuery('#reason').html(your_options);
jQuery('#reason').show(); // if second dropdown is hidden
}
}
If you have a fixed option on page load, then here is one way to achieve what you want.
Give a relation between first select and the second one, like this:
<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>
**Dropdown two**
<select name="reason">
<option class="user" value="a">a</option>
<option class="user" value="d">d</option>
<option class="ip" value="b">b</option>
<option class="system" value="c">c</option>
</select>
Use jQuery to show and hide the option, like this
$("select[name='reason'] option").each(function(){
$(this).hide();
});
$("select[name='bantype']").on("change", function(){
var selected = $(this).val();
$("select[name='reason'] option").each(function(){
if($(this).prop("class") != selected){
$(this).hide();
}else{
$(this).show();
}
});
});
Check out this DEMO..
I have drop down boxes related to each other. The second dropdown values are filtered according to first dropdown box value.
Now I want to clone elements in div with class="old_div" into div with class="new_div" and add events to each new elements in div with class="new_div".
ADD
<div class="old_div" >
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
<br />
</div>
<div class="new_div">
</div>
I am able to clone elements to new div using Jquery
Jquery code:
$("#add_a").on('click',function(){
var data = $('.old_div').html();
$('.new_div').append(data);
});
$("#select1").on('change', function() {
if($(this).data('options') == undefined){
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val().trim();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
But how can i make new elements to be related to each other.
I have created fiddle http://jsfiddle.net/6YEQx/ for reference.
You are using id with select box and making duplicates of it, this is causing problem to identify select box using id in jQuery. So use class instead of id.
HTML :
<select name="select1" class="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" class="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
Also you are adding elements dynamically so need to bind change event using $(document) and on.
EDIT: also added new line in add_a button script to show all options in second select box initially.
jQuery :
$("#add_a").on('click',function(){
var data = $('.old_div').html();
$('.new_div').append(data);
// to show all options initially and remove any preselected option
$('.new_div').find('.select2:last option').show().removeAttr('selected');
});
$(document).on('change',".select1", function() {
var id = $(this).val().trim();
$(this).next('.select2').find('option').hide();
var $options = $(this).next('.select2').find('option[value=' + id + ']');
$options.show();
$options.first().attr('selected',true)
});
Demo
I want to create a very simple (no plugins and basic layout) for a dropdown menu that has checkboxes for options. For example, if C and F are selected and the form is submitted, I want the url to show /index.php?category1=3&&category2=6
<form action="" method="get">
<select multiple="multiple" name="category">
<optgroup label="Category1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</optgroup>
<optgroup label="Category2">
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</optgroup>
</select>
<br><input type="submit" value="go">
</form>
I am not even sure how to start the jquery to pass the values to the url. Any help is much appreciated!
EDIT:
I figured I can do this using instead and simulate a dropdown with jquery.
Here is the jsfiddle: http://jsfiddle.net/k6R7g/
how can I show "2 Selected" instead of "Select..." when selections are made?
See code below, construct the url yourself and it will work. In case the form contains more values you can better add the category to the value of the option.
<form method="get">
<select multiple="multiple" name="category">
<optgroup label="Category1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</optgroup>
<optgroup label="Category2">
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</optgroup>
</select>
<br><input type="button" value="go" onclick="clicked();">
</form>
<script type="text/javascript">
function clicked(){
var v = "";
$('select').find(":selected").each(
function(){
if (v != ""){
v += "&";
}
v += $(this).parent()[0].label + '=' + $(this).context.value;
}
);
window.location.href = "index.php?" + v;
}
</script>
I am using JavaScript image combobox v3.3 and i made my select dropdown list with images that looks like this
How can I make this to show all 10 options without showing a scrollbar?
I'm using the following HTML:
<input type='number' step='0.01' name='odd'/>
<select name='bookmaker' id='bookmaker'>
<option value='bet365' title='icons/bet365.png'></option>
<option value='betathome' title='icons/betathome.png'></option>
<option value='10bet' title='icons/10bet.png'></option>
<option value='whill' title='icons/whill.png'></option>
<option value='bwin' title='icons/bwin.png'></option>
<option value='pinnacle' title='icons/pinnacle.png'></option>
<option value='marathon' title='icons/marathon.png'></option>
<option value='sportingbet' title='icons/sportingbet.png'></option>
<option value='unibet' title='icons/unibet.png'></option>
<option value='tipico' title='icons/tipico.png'></option>
</select>
And this is the jQuery code:
<script>
$(document).ready(function() {
console.log('jQuery is now ready to be executed!');
$('#bookmaker').msDropDown();
});
</script>
try this code after populate droap down
$('.ddChild ddchild_ border shadow').removeAttr("height");